Question

我正在向我网站上的网页发出ajax请求，并将此元素作为body标记的直接子元素：

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

只有一个.container，我想抓住我不知道的ID。

据我所知，这段代码应该做我想要的：

$.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');

但为什么看似明显的答案不起作用？

Answer 1

更新的答案：我会在底部留下我的原始答案，但我担心它可能会因浏览器而出现异常情况。 jQuery的.html()使用了Javascript＆＃39; innerHTML - 有些浏览器选择在使用<head>时删除<body>和innerHTML标记，而其他人没有。

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

＆＃13;

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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

有关浏览器相关问题的更多信息can be found here。

以前的答案：

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

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

正如您在上面的HTML中看到的那样，.container <{1}}内的$(data) {{1} }}

由于$(data)代表了您的$(data)元素，因此您应该能够.container来检索您之后的内容。

＆＃13;
＆＃13;
$(data).attr("id")
＆＃13;
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);
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

更新：如果data是字符串，那么您应该将其转换为DOM元素：$('.container', $(data)).attr('id');

jQuery选择器可以从单独的上下文中忽略元素

2 个答案: