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 that you have read and understand our privacy policy and code of conduct.

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