javascript - jquery 每个循环中的每个循环

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);
    });
});​

或者，如果您只想按照它们在页面上出现的顺序遍历所有.stackItemdiv，并且您实际上并不关心父.stackContainerdiv，那么您可以这样做$('.stackItem').each(function(index) { ... });

嵌套循环遍历.stackItemdiv 的原因是，如果您希望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