1

我试图给元素一个编号系统，它有点像网格（想想 excel 表）。

我在容器中有一些元素，有点像这样：

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

我想使用 jQuery 以可变数量的“列”遍历每个元素

我似乎无法弄清楚何时使用 for 循环或仅使用 .each()。

$('.ele').each(function(){
    var col = 3;
    for(var i = 0; i < col; i++){
        $(this).addClass('row' + i);
    }
});

我知道这只会给我每个行号，即使这样我也不认为这是正确的，但是我如何也可以在那里获得列号？我希望输出是这样的：

<div class="container">
    <div class="ele row0 col0"></div>
    <div class="ele row0 col1"></div>
    <div class="ele row0 col2"></div>
    <div class="ele row1 col0"></div>
    <div class="ele row1 col1"></div>
    <div class="ele row1 col2"></div>
    <div class="ele row2 col0"></div>
    <div class="ele row2 col1"></div>
    <div class="ele row2 col2"></div>
</div>

所以，我知道这段代码是完全错误的，但实际上我什至不知道从哪里开始。先for循环？那么元素呢？如果可能的话，我想尽量不使用:nth-of-type()，但如果必须这样做，那么我可以让它工作。

一旦我弄清楚了这一点，我就可以提出额外的问题......它会影响整个事情，但我需要先了解这一点。

谢谢！

4

1 回答 1

2 
$('.container div.ele').each(function(i) {
    var columnsPerRow = 3;

    var row = Math.floor(i / columnsPerRow);
    var col = i % columnsPerRow;

    $(this).addClass('col' + col + ' row' + row);
});

jsfiddle：http: //jsfiddle.net/hGNLb/3/

于 2013-05-30T00:06:39.827 回答