Вывести порядковые номера элементов в блоке ol?

Question

[komolov-87]

Добрый день.

Есть массив

<ol class="porog">
  <li>
    <span class="porog-number"></span>
    <span class="porog-name">Пункт 1</span>
  </li>
  <li>
    <span class="porog-number"></span>
    <span class="porog-name">Пункт 2</span>
  </li>
  <li>
    <span class="porog-number"></span>
    <span class="porog-name">Пункт 3</span>
  </li>
  <li>
    <span class="porog-number"></span>
    <span class="porog-name">Пункт 4</span>
  </li>
</ol>

Как посчитать и вывести "porog-number" порядковый номер каждого li?

Comments

[Одиночка Айс]

Через серверный язык в цикле, через CSS с помощью htmlbook.ru/css/counter-increment

[komolov-87]

Одиночка Айс, сейчас вывожу порядковые номера так:

.porog {
counter-reset: myCounter;
}
.porog li {
counter-increment: myCounter;
content:counter(myCounter) ".";
}

Но мне нужно еще передать данные номера в балуны на яндекс карте, а таким способом не получается, поэтому черех js или jquery хотелось бы.

[Одиночка Айс]

komolov-87, https://api.jquery.com/each/ и index+1 вам в помощь

Answer 1

[Дмитрий]

Если на jQuery, то, например, так:

var el_counter=1;
$('ol.porog li .porog-number').each(function(){
    $(this).text(el_counter);
    el_counter+=1;
});

Comments

[komolov-87]

Спасибо большое! То, что нужно!