12

jqueryを使用して自動数値クラスをリストに追加することは可能ですか?

html:

<ul id="list">
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 <li>Element 4</li>
 <li>Element 5</li>
</ul>

私はこのようなものを取得したい:

<ul id="list">
 <li class="1">Element 1</li>
 <li class="2">Element 2</li>
 <li class="3">Element 3</li>
 <li class="4">Element 4</li>
 <li class="5">Element 5</li>
</ul>

利用可能な解決策があることを願っています:-)

編集

わかりました、うーん、でも私のリストの最後に常に数字があるとは限りません。では、"item + number" のようなクラス名の組み合わせについてはどうですか? このようなことは可能ですか？

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>
4

6 に答える 6

20 
   $("#list li").each(function(i) {
     this.addClass("item"+(i+1));
    });

こちらが活躍中です

http://jsbin.com/ocake

リンクの例のように、コメントごとに更新してください。

$(document).ready(function() {
        $("#list li").each(function(i) {
        $(this).addClass("item" + (i+1));
        });
      });

しかし、最初のコードは次を追加することで機能するはずだと思います:

this = $(this);

しかし、よくわかりません。

于 2010-04-15T14:49:26.230 に答える
5 
$("#list").children().each(function(i) {
  $(this).addClass("prefix_" + (i+1));
});
于 2010-04-15T14:21:53.913 に答える
2

CSS 2 には、数値クラス名に関するいくつかの特別な規則があります。文法、具体的には G.1 の「クラス」、G.2 の「nmstart」、および G.3 の最後の箇条書きを参照してください。

クラス .c1 から .c5 を使用する:

$('#list li').each(function(){
    $(this).addClass( 'c' + $(this).text().substr(-1) );
});

<li>これは、 の最後の文字が数字であると想定していることに注意してください。正確なユースケースに合わせて（おそらく正規表現を使用して）微調整する必要がある場合があります。

于 2010-04-15T14:23:00.750 に答える
1

jQuery 1.4.x の場合:

$("#list > li").addClass(function(i){return "item" + (i + 1);});
于 2010-04-15T21:34:13.610 に答える
0 
$('ul#list li').each(function(){
  $(this).addClass( $(this).text().split(' ')[1] );
});
于 2010-04-15T14:21:42.583 に答える
0

わかりました、うーん、でも私のリストの最後に常に数字があるとは限りません。では、"item + number" のようなクラス名の組み合わせについてはどうですか? このようなことは可能ですか？

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>
于 2010-04-15T14:35:44.193 に答える