无法遍历$ .ajax中返回的HTML代码段

Question

我有一个像这样的HTML代码段：

<h1>Lorem ipsum dolor</h1>
<p>Euismod tollam impedit</p>

当我通过jQuery的ajax（）方法获取它时：

$.ajax({
    url: 'mocks/test.html',
    dataType: 'html',
    success: function(results) {
    console.log($(results).find('p').text());
    }
});

我在控制台中看到:(一个空字符串）

但是，如果我在我的代码段周围添加一个div：

<div>
    <h1>Lorem ipsum dolor</h1>
    <p>Euismod tollam impedit</p>
</div>

然后控制台显示p元素的内容。知道为什么吗？

Answer 1

因为你正在用两个元素构建一个jQuery对象; h1和p。 find()搜索jQuery对象中元素的后代，但您的p 是 jQuery对象的一部分。

在这种情况下，你需要使用filter()，它在 jQuery对象中的元素中。

alert($(results).filter('p').text());

Answer 2

您的HTML代码段在单个jQuery对象中生成一对元素，而.find()只会搜索其后代节点。

您必须将它们封装在一个容器中（这样您可以在jQuery对象中获得一个带有两个后代的元素，如您所见），或者使用.filter()代替。