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

    });
}

JS / jQ - 跨容器水平移动

1 个答案: