javascript - JS/jQ - 跨容器水平移动

Question

我有一系列 DIV 元素，其中包含更多长度可变的 DIV 元素。作为简化问题的示例代码...

<div class="container">
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
</div>
<div class="container">
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
</div>
<div class="container">
 <div class="inset"></div>
 <div class="inset"></div>
 <div class="inset"></div>
</div>

我一直在使用 jQuery 的 each() 在“插入”DIV 之间移动。但是，我意识到我必须在第一个容器中的第一个插入 DIV、第二个容器中的第一个、第三个容器中的第一个、然后第一个容器中的第二个之间移动，等等。

问题是，我不知道该怎么做。

如果有帮助的话，移动这些的主要目的是按照预设模式更改其背景颜色。我不相信可以重做代码的结构。

有什么办法可以做到这一点吗？

Answer 1

可以，尽管我的方法不是最优雅的。

这是一个示例(需要安装 Firebug 才能查看输出):http://jsfiddle.net/ceZkr/

var maxlength = 0; // first need to find container with the most insets.
$('.container').each(function(index, val){
    var curlength = $(this).find('.inset').length;
    if(curlength > maxlength) {
        maxlength = curlength;
    }
});

console.log('our maxlength: ' + maxlength);

for(var i = 0;i<maxlength; i++) {
    $('.container').each(function(){
        var $box = $(this).find('.inset:eq('+i+')');
        if($box.length) {
            console.log( $box.text() );
        }

    });
}