0

Помогите, плиз, с одной штукой. У меня есть список с неким количеством элементов li. Как в каждый элемент вставить цифру, соответствующую номеру списка. Т.е. чтобы после обработки скриптом было так:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

Я пытался составить цикл, но ничего не вышло(

Заранее спасибо!


Вот, что я пытаюсь:

$('.count_ul li').each(function() {
    var i = 0;
    i++;
    $(this).wrapInner('<div class="btext"></div>');
    $(this).prepend('<div class="bcount fl">'+ i +'</div>');
});

7 ответов 7

6

Сие можно сделать вообще без скриптов, добавляя счётчик стилями.

ul { counter-reset: heading; /* Инициируем счетчик */ } li:before { counter-increment: heading; /* Указываем идентификатор счетчика */ content: counter(heading); /* Выводим номер перед <li> */ }

Немного справки тут

1
  • Там была другая ситуация) Вопрос уже не актуален давно)
    – acidernt
    24 дек 2013 в 20:44
5

Ошибка в том, что вы инициализируете переменную i внутри цикла.
Пример на jsfiddle

P.S. в будущем отвечающим будет очень удобно, если вы свой, даже нерабочий, пример поместите в тот же jsfiddle и дадите ссылку.
Удачи :)

1
5

сорь, но зачем там вообще i?

$('.count_ul li').each(function( index, value ) { 
    console.log(index) // порядковое значение 
})

index это уже счетчик, можно им пользоваться

или внутри цикла

$('.count_ul li').each(function() { 
    $(this).index() //также дает порядковое значение среди элементов li
})
3

А Зачем?? Почему не использовать конструкцию:

<ol>
<li/>
<li/>
</ol>
1
  • Я знаю. Там другое кое что. Тут упрощенный пример.
    – acidernt
    15 апр 2013 в 16:14
3

Обязательно jquery? Если нет, то:

var ul = document.getElementById( 'count_ul' );
var li = ul.getElementsByTagName( 'li' );
for( var i=0; i < li.length; i++ ) 
{
 /* ... */
}
2

В each первым параметром передается индекс элемента коллекции

$('.count_ul li').each(function(i) {
    $(this).wrapInner('<div class="btext"></div>');
    $(this).prepend('<div class="bcount fl">'+ (i + 1) +'</div>');
});

// ).each(function(i) // i от 0 до $colection.length-1

// fl">'+ (i + 1) +'< // без скобок результат будет таким // fl">'+ i + '1' +'<

1
$('.count_ul li').each(function(index) {
    this.innerHTML = '<div class="bcount fl">'+ (index += 1) + '</div>' +
        '<div class="btext"></div>';
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.