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

Question

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

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

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

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

这是我的 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

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

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

这是执行时代码的输出。

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

其中文本">选择格式：">是带有head类的第二个div 的内容。

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

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

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

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

Answer 1

首先，您需要清理您的 HTML

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

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

试试这个：

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

Answer 2

你必须使用first()

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

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