JQuery :first 不选择第一个，而是选择第二个答案

【问题标题】：JQuery :first does not select first, but secondJQuery :first 不选择第一个，而是选择第二个
【发布时间】：2018-10-12 05:18:27
【问题描述】：

我有一个 JQuery 脚本，它使用 AJAX 向以下 url https://djjohal.video/video/671/index.html#gsc.tab=0 发送请求，其中包含视频歌曲的信息。

我实际上想从 AJAX 调用中收到的 html 内容中解析和获取所有详细信息。

HTML页面一共包含3个div，每个都有一个类“.head”，其中第一个div的内容> 是我要获取的歌曲的标题。因此，我尝试使用 JQuery 的 :first 选择器，如下所示：$(PAGE).find("div.class:first").text(); 其中 PAGE 是已解析的 HTML 对象。

它的作用是，它不是选择实际的第一个 div，而是选择第二个具有 head 类的 div，其中包含无用的信息。

这是我的 JavaScript 代码

function action(){
    let url = `https://djjohal.video/video/671/index.html#gsc.tab=0`;

    LOG_INFO( "REQUEST SENT..." );

    $.ajax({
        url : url,
        success : function(res){
            LOG_INFO( "DATA RECEIVED..." );
            let PAGE = $(res);
            LOG_INFO( $(PAGE).find("div.head:first").text() );
        }
    });
}

function LOG_INFO( MSG ){
    $("body").text( MSG );
    console.log( MSG );
}

$(document).ready(function(){
    action();
});

这是 AJAX 调用

期间收到的 HTMLcontent

Cannot Paste the whole content in here

如果支持，您可以通过此链接查看内容。

view-source:https://djjohal.video/video/671/index.html#gsc.tab=0

这是执行时代码的输出。

REQUEST SENT...
DATA RECEIVED...
Select Format :

其中文本“Select Format :”是具有 head 类的第二个 div 的内容。

您可以清楚地看到第一个带有“head”类的div标签是包含歌曲标题的标签。

但是为什么 JQuery 看不到这个呢？？

为什么 :first 选择器会选择第二个 div。

我该怎么办？？请帮忙！！

【问题讨论】：

你能试试$(PAGE).find('div.head').first()吗？据我所知:first 不起作用。
源的HTML 格式错误。 divs 在HEAD 部分等等。
去<title>标签。一样。但必须编辑text。
更好。去<div class="albumCover"> <img src="http://djjohalhd.video/data/thumbs/671.jpg" alt="Heathens - Twenty One Pilots ,…。 image 的alt attribute。

标签： javascript jquery html ajax selector

【解决方案1】：

首先你需要清理你的 HTML

为什么在 HTML 标签之外有一个 HEAD 标签？

此外，您不应该将正文内容放在头部部分。

试试这个：

$.ajax({
    url : url,
    success : function(data){
        var responseHtml = $.parseHTML(data);
        songTitle = $.trim(
                $(responseHtml).filter('div.head:first').text());
        alert(songTitle);
    }
});

【讨论】：

哇！！工作！

【解决方案2】：

你必须使用first()

 $(PAGE).find("div.head").first().text();

更多信息：https://api.jquery.com/first/

【讨论】：