在$ .AJAX加载的HTML上使用Jquery选择器？

我有

$.ajax({
  url: identity,
  success: function(data) { ProcessIdentityServer(data) }
});

当返回'data'时,是否有办法针对它运行选择器而不将其添加到DOM中.那么,例如,如何在不将数据首先添加到DOM中的情况下获取"数据"中包含的HTML中包含的任何LINK标记的所有href值？如果我想要做的就是将一些东西提取到一个数组中,那么将它添加到DOM中似乎是一种耻辱.有人有任何想法吗？

1> stuartloxton..：

---

我将在这里添加的一个注意事项是,如果您的AJAX返回以下内容:

Hello
World

下面的jQuery 不会工作:

$(data).find('div.test');

因为div是顶级元素而数据不是元素而是字符串,因此需要使用它才能使其工作 .filter

$(data).filter('div.test');

---

那太有用了!我花了半天时间搞清楚这个!

---

这回答了这个问题.

---

认真地说这个答案太有帮助..花了半天时间.

2> Beau Simense..：

---

// Finds all div elements within an XML document from an AJAX response.
$("div", xml.responseXML);

---

我投了这个,虽然第二个想法,我认为明确地调用`find`更具可读性,特别是对那些不太熟悉框架的人.

3> David Nyhuis..：

---

在开始之前,让我们快速浏览一下jQuery对$.ajax()调用返回的基本HTML页面的作用,并将返回的数据转换为jQuery对象.

$.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // log the result of the data converted into a jquery object.
        console.log( $(data) );

    }
});

以下是您期望看到的内容:

[

    0         
    1         title
    2         
    3         meta
    4         
    5         div#container
    6         Comment { data=" #container ", length=12, nodeName="#comment", more...}
    7         
    jquery    "1.6.4"
    length    8
    selector  ""

    // additional data and functions removed for brevity

]

哎呀! 那太难看了!尝试对此做任何事情都可能产生结果,但您需要知道每次数据结构的样子,以及数据在该对象中的位置.这些数据是根源还是埋没在？

就像以前的海报所提到的那样,你可以使用.filter(),但根据搜索的目的就是根,因为你只是过滤了返回的结果.但是,如果您.find()在此时使用并且您想要的元素位于根目录,那么您将收到一个空集,但是会找到埋在根之外的任何内容.

那么,为什么要坚持需要100%确定地知道数据结构是什么样的,为什么要经历所有必须使用多个.filter()和.find()调用的麻烦,并且我敢说一个.each()循环呢？呸!这只是太多的工作而且花费了太多时间.

如果您想要.find()从.ajax()调用返回的特定HTML元素,请从以下行开始:

var response = $('').html(data);

这真的很容易吗？事实上,是的!这里发生的是创建一个新元素并将其转换为jQuery对象.这用于从.ajax()调用中插入返回的HTML的起始位置.这有点像$('html')在网页上做.有了这个,你可以开始寻找元素.

response.find( ... ); // any jquery selector in place of the ellipsis.

这是一个使用原始海报问题的例子:

$.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // set the returned contents in a new base  tag.
        var response = $('').html(data),
            anchors, hrefValuesList = [ ],
            i, end;

        // now you can search the returned html data using .find().
        anchors = response.find('a');

        // grab all your href values from each anchor element.
        end = anchors.length;
        for (i = 0; i < end; i++) {
            hrefValuesList.push( anchors[ i ].href );
        }

        // continue processing the data as necessary...

    }
});

显然,如果您想过滤掉任何不需要的内容,或者想要优化返回的值,上面的内容将需要一些改进.

有了它,你可以看到类似下面返回的示例数组:

[ "http://stackoverflow.com/", "http://www.google.com/" ] // and so on...

使用这种方法,您可以轻松地使用.find()通过$.ajax()函数返回的任何HTML数据的强大功能,就像您在DOM中找到的任何元素一样.真正的好处是,您不是直接操纵DOM来查找或执行您想要的操作,这是一个昂贵的过程.

快乐擦洗!=)

4> nakajima..：

---

假设这data是一串HTML,你可以这样做:

$(data).find('a');

这将返回链接而不将数据添加到DOM.

---

这似乎不起作用,但.filter而不是.find.正如@stuartloxton的回答