jquery-templates - アイテムをループするときに奇数/偶数クラスを循環させるにはどうすればよいですか?

Question

jquery-tmpl を使用して、1 つおきにクラスを追加して行のプレゼンテーションをストライプ化する必要があるため、データ ['Cat','Dog','Horse','Noddy'] から生成されます。

<li>Cat</li>
<li class="odd">Dog</li>
<li>Horse</li>
<li class="odd">Noddy</li>

ここで提案された解決策は、私たちノディが簡単に消化できるようにさらに洗練できるものの始まりのように見えました.

score 6 · Accepted Answer

どうでも。いつものように物事を複雑にしすぎています...

addClass ...を使用して：oddセレクターでフォローアップするだけです。

$('#template').tmpl(data).appendTo('#list')
$("#list li:odd").addClass('odd')

score 3 · Accepted Answer

いくつかの試行錯誤の末、解決策を見つけました。式の評価には {{= }} タグを使用できます。

{{each(i) Animals}}<li class="{{= i % 2 ? 'even' : 'odd'}}">...</li>{{/each}}

もちろん、ニーズに正確に合わせて変更できます。クラスを内部に配置して、奇数または偶数の空の値を出力できます。

別の解決策は関数を使用することです (jquery tmpl docs にこの例があります) が、それは醜いです。

score 0 · Accepted Answer

@ジョンミー、私はあなたが過度に複雑になっているとは思わない。

テンプレートは、奇数クラスの追加が行われる場所です。ロジックとパフォーマンスの面で。

これは、ネストされたテンプレート内にインデックスを作成するためのパッチです。追加の$oddプロパティが必要な場合は、次のように簡単に拡張できます。

jQuery.map( data, function( dataItem, index ) {
    if(dataItem){
         dataItem.$index = index;
         dataItem.$odd = index % 2 === 1;
    }

3 に答える 3