jQuery: addClass 1,2,3, и т.д. автоматический к списку
действительно ли это возможно, для добавления автоматических числовых классов к списку при помощи 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>
надежда там является доступным решением :-)
Править
хорошо, mhhm, но мой список имеет не всегда число в конце. таким образом, что о комбинации имени класса, как "объект + число"? действительно ли что-то вроде этого возможно?
<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>
6 ответов
В CSS 2 есть некоторые особые правила, относящиеся к числовым именам классов. См. Грамматику , в частности "class" в G.1, "nmstart" в G.2 и последний пункт в G.3.
Использование классов .c1 - .c5:
$('#list li').each(function(){
$(this).addClass( 'c' + $(this).text().substr(-1) );
});
Обратите внимание, что здесь предполагается, что самым последним символом является число. Возможно, вам придется настроить (возможно, используя регулярное выражение) для вашего конкретного случая использования.
$("#list li").each(function(i) {
this.addClass("item"+(i+1));
});
Вот это в действии
Обновить по комментариям, как в примере ссылки, это работает:
$(document).ready(function() {
$("#list li").each(function(i) {
$(this).addClass("item" + (i+1));
});
});
Но я думаю, что исходный код должен работать, добавляя:
this = $(this);
Но не уверен.
$("#list").children().each(function(i) {
$(this).addClass("prefix_" + (i+1));
});
$('ul#list li').each(function(){
$(this).addClass( $(this).text().split(' ')[1] );
});
хорошо, ммм, но в моем списке не всегда есть номер в конце. так что насчет комбинации имени класса, например «элемент + номер»? возможно ли что-то подобное?
<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>
Для jQuery 1.4.x:
$("#list > li").addClass(function(i){return "item" + (i + 1);});