0

Помогите, разобраться почему по клику на кнопку Каталог, мне после ссылок 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" должен перебирать значения, но почему-то всем выводит только первый список ?

1 ответ 1

2

Это потому, что с каждой итерацией количество секций в 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>

3
  • Спасибо, за решение, хотя понимания почему увеличивается, количество секций в DOM дереве из-за клонирования, не пришло( 26 авг 2018 в 15:26
  • 1
    @BlackStar1991 ну вот вы делаете выборку элементов (секций в вашем случае) с классом added_catalog__section и получаете 3 разные секции для трёх разных пунктов меню. Далее первую секцию вы клонируете и добавляете к первому пункту меню, из за чего на странице становится уже 4 элемента с классом added_catalog__section, тоесть 4 секции, причём новая выше старых. Затем вы снова делаете выборку секций, берёте вторую, но она оказывается той же самой, что и в прошлой итерации, так как перед ней уже появилась ещё одна. И так до конца цикла. Понимаете?
    – Diskyp
    26 авг 2018 в 15:35
  • Всё, теперь дошло. Спасибо 26 авг 2018 в 16:40

Ваш ответ

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

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