jquery - jQuery: 要素をカウントし、要素番号を CSS クラスとして使用する

Question

画像のキャプションを生成する jquery スクリプトがあります。しかし、キャプション付きの要素を数えて、適切な数をクラスとして画像クラスに追加したいと思います。(.length) を数える方法は知っていますが、すべての要素から適切な数を使用するにはどうすればよいですか?

ブラジル

score 5 · Accepted Answer

渡された関数に変数を渡すとeach()、現在の要素の番号が保持されます。

$('.foo').each(function (i) {
    $(this).addClass('foo-' + i);
});

score 0 · Accepted Answer

css を使用できない理由はありますか? 疑似セレクタ、nth-child があります。

a:nth-child(1){color: #123;}
a:nth-child(2){color: #456;}
a:nth-child(3){color: #789;}

等々。

Selectivizrを使用すると、IE6 から 8 でこれが機能します。その後、nth-child がサポートされます。つまり、よりスマートな標準ベースの css を今すぐ書き始めることができ、スクリプトによって IE で動作するようになります。

必要に応じてすべてを javascript で行うこともできますが、スタイルの適用には css を使用する必要があります。javascript を使用してクラスを追加する代わりに css を使用することができれば、サイトはより効率的になり、保守が容易になります。

score 0 · Accepted Answer

要素のクラスを設定するだけなら、jQuery の有無にかかわらず非常に簡単です。jQuery .attr()関数をすばやく使用すると、任意のクラス、つまりクラスを変更できます。

$("[div to change]").attr("class", "[class_name]" + [number]);

ここではをに設定しclassました[class_name][1,2,3...]。したがって、 wasと[class_name]wereの場合、をに設定します。hello[number]5classhello5

別の方法として、オブジェクトに a を追加したい場合class(適切なスタイルを維持したまま)、jQuery の.addClass()関数を使用できます。

$("[div to change]").addClass("[class_name]" + [number]);

これにより、同様の名前classのがオブジェクトに追加されます。

score 0 · Accepted Answer

クラス名を動的に変更することは、この方法で実現できます。

$('.test').each(function (e) { 
    $(this).addClass('test_' + e); 
});

4 に答える 4