jQuery 选择器忽略了单独上下文中的元素



我正在向我网站上的一个页面发出ajax请求,并将此元素作为body标签的直接子级:

<div class="container" id="wantme"><div class="content"></div></div>

只有一个.container,我想抢它的身份证,我不知道。

据我所知,这段代码应该做我想做的:

$.get('/page', function(data) {
id = $('.container', data).attr('id');
});

但是.container选择器找不到任何内容。

我确实找到了这两种解决方法。我能找到.content,我可以像这样爬上树:

id = $('.content', data).parent().attr('id');

但我不能直接跳到那里。

我在StackOverflow的其他地方找到了这个解决方法:

html = $('<div></div>').html(data);
id = html.find('.container').attr('id');

但为什么看似显而易见的答案不起作用呢?

更新的答案:我会把我的原始答案留在底部,但我担心它可能会根据浏览器而行为不端。 jQuery的.html()利用了Javascript的innerHTML- 一些浏览器在使用innerHTML时选择剥离<head><body>标签,而其他浏览器则没有。

实现您所追求的目标的最安全方法可能仍然是您提到的解决方法,如下所示:

var data = '<!doctype html><html><body><div class="container" id="findme"><div class="content"></div></div></body></html>';
var $container = $("<div />").html(data).find(".container");
var id = $container.attr("id");
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

有关浏览器相关问题的更多信息,请参阅此处。

<小时 />

以前的答案:

当你将HTML传递给jQuery元素时,它将忽略<body>标签以及它们之外的任何内容。给定 JSFiddle 中的数据字符串,$(data)将创建如下所示的内容:

<div class="container" id="findme">
<div class="content"></div>
</div>

正如您在上面的 HTML 中看到的,您的.container不在$(data)内部-它是$(data).

因为$(data)代表你的.container元素,所以你应该能够$(data).attr("id")检索你想要的东西。

var data = '<!doctype html><html><body><div class="container" id="findme"><div class="content"></div></div></body></html>';
var id = $(data).attr('id');
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您没有从$('.container', data).attr('id');获取 ID 是因为您正在设置第二个参数的值。您要做的是:$('.container ' + data).attr('id');

更新: 如果数据是一个字符串,那么你应该把它转换成一个DOM元素:$('.container', $(data)).attr('id');

最新更新