Question

我有一些div用作容器，我想循环遍历它们然后遍历其中的项目。

所以不是$('.stackContainer .stackItem').each(，而是像这样：

// setup stacks
$('.stackContainer').each(function(containerIndex) {
    //console.log($(this));
    console.log(containerIndex);

    $(this).('.stackItem').each(function(itemIndex) {
        console.log(itemIndex);     
    }
});

只有这样才能工作。这怎么可能？

Answer 1

尝试

$('.stackContainer').each(function(containerIndex) {
    //console.log($(this));
    console.log(containerIndex);

    $(this).find('.stackItem').each(function(itemIndex) {
        console.log(itemIndex);     
    }
});

Answer 2

尝试find()方法：

$('.stackContainer').each(function(containerIndex) {
    //console.log($(this));
    console.log(containerIndex);

    $(this).find('.stackItem').each(function(itemIndex) {
        console.log(itemIndex);     
    }
});

Answer 3

其他答案表明，有很多方法可以做到这一点。这是一个解决方案：http://jsfiddle.net/cezHH/3/

$(".stackContainer").each(function(stackIndex) {
    $(this).children().css('class', '.stackItem').each(function(itemIndex) {
        $(this).html($(this).html() + "=>" + itemIndex);
    });
});

或者，如果您要做的只是按照它们在页面上显示的顺序迭代所有.stackItem div，并且您实际上并不关心父.stackContainer divs，然后你可以做$('.stackItem').each(function(index) { ... });

嵌套迭代.stackItem div的循环的原因是，如果希望每次切换父容器时itemIndex变量重置为零。

Answer 4

在旁注中，出于性能原因，如果集合可能具有任何大小，则应避免使用jQuery的each（）：

http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

http://jsperf.com/jquery-each-vs-for-loop

jquery每个循环中的每个循环

4 个答案: