javascript - jquery ajax 无法循环通过找到的数据

Question

我想循环通过一个加载了 ajax 的文件，但它不会循环，我已经尝试了几件事，但我无法让它工作。

// jQuery

$.ajax({
    url: 'file.html',
    type: "GET",
    dataType: "html",
    success: function(data) {

        $(data).find('div').each(function(i){
            alert('found')
        });

    },
    error: function(){
        alert('oeps...')
    }                           
});

// 文件.html

<div>
// content goes here
</div>

<div>
// content goes here
</div>

<div>
// content goes here
</div>

...


...    

Answer 1

您需要更改.find为.filter. 这是因为.find搜索所有元素的子后代，但是由于您的html文件只是<div>s，因此您需要使用.filter来查找它们。

演示：http: //jsfiddle.net/zuPVp/

Answer 2

您不需要指定html为数据类型，它不是必需的。

所以，删除以下行。

dataType: "html"

Answer 3

不起作用的原因是.find在数据中查找后代，所有这些 div 都在根目录下。

您可以创建一个空 div，然后将该 div 的 html 设置为您的数据。这将确保 find 有效，因为 div 将成为后代。

$.ajax({
    url: 'file.html',
    type: "GET"
    success: function(data) {
        $('<div/>').html(data).each(function(index, item) {
            console.log(item);
        });
    },
    error: function(){
        console.log('error')
    }                           
});

或者你可以使用过滤器。

$.ajax({
        url: 'file.html',
        type: "GET"
        success: function(data) {
            $(data).filter('div').each(function(index, item) {
                console.log(item);
            });
        },
        error: function(){
            console.log('error')
        }                           
    });

Answer 4

很难知道你在做什么，但我猜是这样的：

$.ajax({
    url: 'file.html',
    type: "GET"
    success: function(data) {
        $.each($('div', data.outerHTML), function(index, item) {
            console.log(item);
        });
    },
    error: function(){
        console.log('error')
    }                           
});

Answer 5

在这种情况下，.find()它不起作用，因为您正在搜索的 HTML 不包含任何子div节点。要解决此问题，首先将项目附加到某个容器，然后使用.find().

http://jsfiddle.net/jbabey/hvkw9/1/

var html = $('<div>first div</div><br /><div>second div</div>');

// 0, no child divs in html
console.log(html.find('div').length);
// 2, now the divs in html are children of an intermediate div
console.log($('<div>').append(html).find('div').length);