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>

したがって、このコードが完全に間違っていることはわかっていますが、実際にはどこから始めればよいかさえわかりません。最初にループしますか? 次に要素？できれば使わないようにしたいのですが、使わ: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 に答える