Перебор элементов dom с помощью each

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Для перебора элементов дерева есть метод each. Теперь ближе к теме, допустим у нас есть в блоке списоки ul и надо их все перебрать


<menu>

  <div class="ul-menu">

   <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
   </ul>

  </div>

  <div class="ul-menu">

   <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
   </ul>

  </div>

</menu>

Для перебора элементов ul напишем такой код


function rain_menu(){
  $('.ul-menu ul').each(function(i,elem) {

    // действие, которые надо сделать

  });
}

Для того чтобы подсчитать количество элементов li в каждом ul, немного модернизируем выше написанный код


function rain_menu(){
  var i;
  $('.ul-menu ul').each(function(i1,elem1) {
    i=0;
    $(this).find('li').each(function(i2,elem2) {
      $(this).addClass('rain-'+i2);
      i=i2;
    });

    alert('кол-во элементов li: '+i);
  });
}

Фактически получился перебор массива в массиве.

Для тех кто не в теме, и пытается сам разобраться в коде

первый $(this) = текущему $(‘ul-menu ul’) в итерации

второй $(this) = текущему $(‘ul-menu ul li’) в итерации

НО если заменить $(this), ну хотя бы $(‘ul-menu ul li’), то это не одно и тоже,

так как $(‘ul-menu ul li’) — данный селектор выберет все li а не текущий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *