Home » Jquery » javascript – How do you detach and re-attach items with different classes on different lists using jQuery?-Exceptionshub

javascript – How do you detach and re-attach items with different classes on different lists using jQuery?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am working on a page with a dropdown selector and three separate lists, where selecting an option on the dropdown would do a detach() on all the items on each list except for those with a class name the corresponds with the value="" of the option currently selected, without affecting their nth-child styles. (E.g. selecting “green” on the dropdown would result in each list only showing li elements with class “item-green” appearing.)

Currently, when an option on the dropdown is selected the first time, everything works as expected. However, when the selected option changes on all succeeding tries, nothing on each list appears.

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>
How to&Answer:

Instead of detaching/reattaching the li in the DOM your code can be made much more simple by just toggling a class on the relevant elements to display/hide them.

Note in the example below that I amended the classes on the li to have a common .item to make targeting them easier, and a separate class to determine the colour they belong to. Try this:

$("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>