JQuery :first选择器未选中首个.head元素反而选中第二个的问题求助

这种情况大概率是你对jQuery的:first选择器工作逻辑的理解有偏差，或者AJAX返回的HTML实际结构和你预期的不一样。咱们一步步排查解决：

1. 先确认AJAX返回的真实HTML结构 #

有时候浏览器页面显示的结构和AJAX返回的原始HTML有差异（比如页面加载后有JS动态修改了DOM），你可以先把返回内容打印出来，核对三个.head元素的真实顺序：

$.ajax({
  url: "https://djjohal.video/video/671/index.html#gsc.tab=0",
  success: function(html) {
    console.log('原始返回HTML:', html);
    // 后续解析逻辑放在这里
  }
});

仔细看打印内容里，第一个.head是不是被嵌套在隐藏容器里？jQuery的:first是按DOM节点顺序匹配的，不管元素是否可见，要是第一个.head藏在不可见区域，你看到的“第一个”其实是DOM里的第二个。

2. 换用更稳定的.first()方法 #

:first选择器和.first()方法的逻辑略有不同，后者是从匹配到的元素集合里直接取第一个，在处理动态加载的HTML时更可靠：

var firstHead = $(html).find('.head').first();
var songTitle = firstHead.text().trim();
console.log('提取的歌曲标题:', songTitle);

3. 精准定位第一个匹配元素 #

如果上面的方法还是不行，你可以直接遍历所有.head元素，确认每个的内容后再取目标：

var allHeads = $(html).find('.head');
console.log('找到的.head元素总数:', allHeads.length);
// 遍历打印每个元素的内容，确认哪个是你要的标题
allHeads.each(function(index, elem) {
  console.log(`第${index+1}个.head内容:`, $(elem).text().trim());
});
// 直接取第一个（索引从0开始）
var targetTitle = allHeads.eq(0).text().trim();

4. 排查是否有隐藏的同名类元素 #

还要注意，返回的HTML里可能有其他隐藏元素也用了.head类，导致你以为的“第一个”其实不是DOM里的第一个。通过上面的遍历代码，你能清楚看到所有匹配元素的内容，避免被隐藏元素干扰。

内容的提问来源于stack exchange，提问作者Danish Nayeem