Клонирование элементов навигации?

196
23 ноября 2018, 18:10

Помогите, разобраться почему по клику на кнопку Каталог, мне после ссылок bl_catalogProducts__link сыпяться только значения Первого списка из навигации added_catalog? Как сделать что б после каждой ссылки шёл соответствующий ей подсписок ?

 var buttonRubrics = $(".btn_categories"); 
 
  buttonRubrics.one("click", function() { 
    if ($(".bl_catalogProducts").is(":not(.js-addedFooterInfoBlock)")) { 
      // Клонируем ссылки информации из футора в Блок оббертку, единожды, пока нету класса 
      $(".bl_catalogProducts__link").removeAttr("href"); 
      /// Убираем href со ссылок 
 
      for (var i = 0; i < $(".bl_catalogProducts__item").length; i++) { 
        console.log("li =" + i); 
 
        var li = $(".added_catalog__section") 
          .eq(i) 
          .clone(true); 
        $(".bl_catalogProducts__item") 
          .eq(i) 
          .append(li); 
      } 
    } 
 
    fullCategories.toggleClass(active); 
  });
.added_catalog__section { 
  padding: 10px; 
  border: 1px solid #f00; 
  max-width: 300px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="bl_catalogProducts"> 
  <button class="btn_categories visible-sm visible-xs" type="button">Каталог</button> 
  <ul class="bl_catalogProducts__full"> 
    <li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">УДИЛИЩА</a></li> 
    <li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">КАТУШКИ</a></li> 
    <li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ЛЕСКИ И ШНУРЫ</a></li> 
  </ul> 
</div> 
 
<nav class="added_catalog hidden"> 
  <ul class="added_catalog__section"> 
    <li class="added_catalog__item"> 
      <a href="/spinningovye/"> Спиннинговы</a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/fidernye/"> Фидерные</a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/karpovye/"> Карповые</a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/mahovye/">  Маховые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/bolonskie/">  Болонские                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/matchevye-418/">   Матчевые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/bortovye/">  Бортовые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/serfovye/">  Серфовые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/nahlystovye-423/">   Нахлыстовые                </a> 
    </li> 
  </ul> 
 
  <ul class="added_catalog__section"> 
    <li class="added_catalog__item"> 
      <a href="/bezinercionnye-416/"> 
                    Безинерционные                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/multiplikatornye-152/"> 
                    Мультипликаторные                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/nahlystovye-437/"> 
                    Нахлыстовые                </a> 
    </li> 
  </ul> 
 
  <ul class="added_catalog__section"> 
    <li class="added_catalog__item"> 
      <a href="/shnury/"> 
                    Шнуры                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/leski/"> 
                    Лески                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/flyuorokarbon/"> 
                    Флюорокарбон                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/nahlystovye-shnury/"> 
                    Нахлыстовые                </a> 
    </li> 
  </ul> 
</nav>

Я не могу понять, вроде как счётчик "i" должен перебирать значения, но почему-то всем выводит только первый список ?

Answer 1

Это потому, что с каждой итерацией количество секций в DOM становится на 1 больше, благодаря клонированию. Решением будет произвести выборку элементов до цикла, чтобы она осталась неизменна.

var buttonRubrics = $(".btn_categories"); 
 
  buttonRubrics.one("click", function() { 
    if ($(".bl_catalogProducts").is(":not(.js-addedFooterInfoBlock)")) { 
      // Клонируем ссылки информации из футора в Блок оббертку, единожды, пока нету класса 
      $(".bl_catalogProducts__link").removeAttr("href"); 
      /// Убираем href со ссылок 
      let sections=$(".added_catalog__section"), 
      items=$(".bl_catalogProducts__item") 
      for (var i = 0; i < $(".bl_catalogProducts__item").length; i++) { 
 
        var li = sections 
          .eq(i) 
          .clone(true); 
        items 
          .eq(i) 
          .append(li); 
      } 
    } 
 
    fullCategories.toggleClass(active); 
  });
.added_catalog__section { 
  padding: 10px; 
  border: 1px solid #f00; 
  max-width: 300px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="bl_catalogProducts"> 
  <button class="btn_categories visible-sm visible-xs" type="button">Каталог</button> 
  <ul class="bl_catalogProducts__full"> 
    <li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">УДИЛИЩА</a></li> 
    <li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">КАТУШКИ</a></li> 
    <li class="bl_catalogProducts__item"><a class="bl_catalogProducts__link">ЛЕСКИ И ШНУРЫ</a></li> 
  </ul> 
</div> 
 
<nav class="added_catalog hidden"> 
  <ul class="added_catalog__section"> 
    <li class="added_catalog__item"> 
      <a href="/spinningovye/"> Спиннинговы</a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/fidernye/"> Фидерные</a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/karpovye/"> Карповые</a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/mahovye/">  Маховые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/bolonskie/">  Болонские                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/matchevye-418/">   Матчевые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/bortovye/">  Бортовые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/serfovye/">  Серфовые                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/nahlystovye-423/">   Нахлыстовые                </a> 
    </li> 
  </ul> 
 
  <ul class="added_catalog__section"> 
    <li class="added_catalog__item"> 
      <a href="/bezinercionnye-416/"> 
                    Безинерционные                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/multiplikatornye-152/"> 
                    Мультипликаторные                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/nahlystovye-437/"> 
                    Нахлыстовые                </a> 
    </li> 
  </ul> 
 
  <ul class="added_catalog__section"> 
    <li class="added_catalog__item"> 
      <a href="/shnury/"> 
                    Шнуры                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/leski/"> 
                    Лески                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/flyuorokarbon/"> 
                    Флюорокарбон                </a> 
    </li> 
    <li class="added_catalog__item"> 
      <a href="/nahlystovye-shnury/"> 
                    Нахлыстовые                </a> 
    </li> 
  </ul> 
</nav>

READ ALSO
Вывод определенных элементов массива

Вывод определенных элементов массива

Есть одномерный массив a, нужно вывести все элементы массива начиная от K и заканчивая N элементом массива:

177
infowindow.js:15 Uncaught TypeError: f.get is not a function in react component

infowindow.js:15 Uncaught TypeError: f.get is not a function in react component

У меня в верхнем компоненте подняты данные c infowindow, marker, map, надо обработать клик, чтобы окошко открывалось и закрывалось, но выскакивает ошибка

187
Как правильно работать с компонентами в Nuxt.js?

Как правильно работать с компонентами в Nuxt.js?

Работая над проектом столкнулся со следующими трудностями: Например есть такой компонент:

130
Применить атрибут при загрузке DOM

Применить атрибут при загрузке DOM

Имеется <div> с множеством разных ссылок <a>

138