javascript - 在 jQuery .get() 的 Data 对象中查找元素

Question

我认为这会更容易找到:)

$.get('/page.html', function(data) {
    //get only contents of class="contents"
});

我似乎无法找到如何做到这一点。

Answer 1

只需使用.find()：

$(data).find(".contents")

这是您可以使用的最终代码：

$.get('/page.html', function(data) {
    var contents = $(data).find(".contents");
});

然后根据元素的类型.contents，您可以使用contents.html()或contents.text()（大多数元素）或contents.val()（输入元素）。

从技术上讲，另一个想法是使用.filter().

这一切都取决于您的 HTML 在data. 如果你的结构是这样的：

<div id="main">
    blah blah
    <div class="contents"></div>
</div>

那么结果$(data)将会是[#main]，你需要使用find. 如果你的结构是这样的：

<div id="main"><div>
<div class="contents"></div>
<div class="another"></div>

那么结果$(data)将会是[#main, .contents, .another]，你需要使用filter.

当然，结合它们，它可能是：

$.get('/page.html', function(data) {
    var all = $(data), contents;
    contents = all.filter(".contents");
    if (!contents.length) {
        contents = all.find(".contents");
    }
    if (contents.length) {
        // It/they was/were found at some point
    }
});

Answer 2

我会做这样的事情......

$.get('/page.html', function(data){
   var $page = $(data)
   var $contents = $page.filter('.contents'); /* this will get a reference to the .contents */
   /* do more stuff here 
      ....  
   */
});

看看这个 SO 的公认答案：Get HTML of div element returned by .get with jQuery

.find()如果返回内容的结构不确定（有时由于是后代而需要使用的地方.contents，您总是可以执行检查并运行.filter()，反之亦然。

例子：

$contents = $page.filter('.contents');
if($contents.length == 0) {
   $contents = $page.find('.contents');
}

只是基于其他答案中发布的评论的想法。

Answer 3

如果您从返回的 jQuery 对象中创建一个 jQuery 对象，data并且 jQuery 集中的包装元素是.contents元素，则find无法找到目标元素，如果该contents元素是后代元素，则filter方法无法选择该元素。您可以创建一个虚拟元素，使用返回的数据填充它并使用find方法。

$.get('/page.html', function(data) {
    var element = $('<div/>').html(data).find('.contents');
});