jQuery的：第一不选择第一，但第二

Question

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

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

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

它的作用是，与其选择实际的第一个div而不是选择带有头类的第二个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调用期间收到的HTML内容

Cannot Paste the whole content in here

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

查看源代码：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 。

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

Answer 1

您必须使用first()

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

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

Answer 2

首先，您需要清理HTML

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

同样，您不应该将身体内容放入头部。

尝试这个：

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