Как отсоединить и повторно прикрепить элементы разных классов в разных списках, используя jQuery?

Question

Я работаю над страницей с выпадающим селектором и тремя отдельными списками, где при выборе опции в выпадающем списке будет detach() для всех элементов в каждом списке, кроме тех, у которых имя класса соответствует значению value="" опции, выбранной в данный момент, без влияния на их nth-child стили. (Например, выбор «зеленый» в раскрывающемся списке приведет к тому, что в каждом списке будут отображаться только элементы li с классом «item-green».)

В настоящее время, когда параметр раскрывающегося списка выбирается впервые, все работает как положено. Однако, когда выбранный параметр изменяется во всех последующих попытках, в каждом списке ничего не появляется.

var detach;

$("select").change(function() {
  var current = $("select option:selected").attr("value");
  var currentClass = ".item-" + current;

  $('.lists').show(0);

  $('.lists ul').each(function() {
    var detach = $(this).find("li").detach();
    var detachFiltered = detach.filter(currentClass);
    $(this).append(detachFiltered);
  });
});

.lists {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<select>
  <option selected disabled>Choose a color:</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<div class="lists">
  <section>
    <h1>Set 1</h1>
    <ul>
      <li class="item-red">Burgundy</li>
      <li class="item-green">Chartreuse</li>
      <li class="item-blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 2</h1>
    <ul>
      <li class="item-red">Crimson</li>
      <li class="item-green">Olive</li>
      <li class="item-blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 3</h1>
    <ul>
      <li class="item-red">Scarlet</li>
      <li class="item-green">Lime</li>
      <li class="item-blue">Ultramarine</li>
    </ul>
  </section>
</div>

Answer 1

Вместо отсоединения / повторного присоединения li в DOM ваш код можно сделать намного проще, просто переключив класс на соответствующие элементы, чтобы отобразить / скрыть их.

Обратите внимание, что в приведенном ниже примере я изменил классы на li, чтобы они имели общий .item для облегчения нацеливания на них и отдельный класс для определения цвета, к которому они принадлежат. Попробуйте это:

$("select").change(function() {
  var current = $(this).val();
  $('.lists').show().find('.item').removeClass('active').filter('.' + current).addClass('active');
});

.lists { display: none; }
.item { display: none; }
.item.active { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option selected disabled>Choose a color:</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<div class="lists">
  <section>
    <h1>Set 1</h1>
    <ul>
      <li class="item red">Burgundy</li>
      <li class="item green">Chartreuse</li>
      <li class="item blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 2</h1>
    <ul>
      <li class="item red">Crimson</li>
      <li class="item green">Olive</li>
      <li class="item blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 3</h1>
    <ul>
      <li class="item red">Scarlet</li>
      <li class="item green">Lime</li>
      <li class="item blue">Ultramarine</li>
    </ul>
  </section>
</div>