jquery: addClass 1,2,3 и т. д. авто в список

Question

возможно ли добавить автоматические числовые классы в список с помощью 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>

надеюсь, что есть решение: -)

---

Редактировать

Хорошо, но мой список не всегда имеет номер в конце. так что насчет комбинации имени класса, такой как "элемент + номер"? возможно ли что-то подобное?

<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>

Answer 1

   $("#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);

Но не уверен.

Answer 2

$("#list").children().each(function(i) {
  $(this).addClass("prefix_" + (i+1));
});

Answer 3

CSS 2 имеет некоторые специальные правила, относящиеся к числовым именам классов. См. грамматику , в частности, «класс» в G.1, «nmstart» в G.2 и окончательный пункт в G.3.

Использование классов .c1 - .c5:

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

Обратите внимание, что предполагается, что самый последний символ <li> - это число. Возможно, вам придется настроить (возможно, с помощью регулярных выражений) для вашего точного случая использования.

Answer 4

Для jQuery 1.4.x:

$("#list > li").addClass(function(i){return "item" + (i + 1);});

Answer 5

хорошо, ммм, но мой список не всегда имеет номер в конце. так что насчет комбинации имени класса, такой как "элемент + номер"? возможно ли что-то подобное?

<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>

Answer 6

$('ul#list li').each(function(){
  $(this).addClass( $(this).text().split(' ')[1] );
});