Question

我试图给元素一个编号系统，它有点像网格（想想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迭代每个元素，其中包含可变数量的“columns”

我似乎无法弄清楚何时使用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>

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

一旦我理解了这一点，我可以问一下奖金问题......它会在整个事情中引发一个问题，但我需要首先理解这一点。

谢谢！

Answer 1

$('.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/

jQuery网格编号系统与每个或为

1 个答案: