使用 jQuery.each() 方法显示隐藏元素

Question

I run a loop and create filters, which I pack in categories (packed in <ul> ). These filters can be activated with checkboxes (packed in <li> within the <ul> ). I can have 2 or 5 category filters, so 2 or 5 <ul> with multiple <li> inside each. With css all <li> checkboxes above 3 are hidden at start, and I use a "show more" element (in <span> ) that is located just before </ul> . As it's a loop, all <ul> elements use the same id="filterlist" and class="sidebar-ul". Also all the <li> checkboxes have the same class="sidebarfilters". I have a JQuery each function, and on click on one of the <span> I only want to show the hidden <li> elements, that are placed within the <ul> element, in which also the clicked span is located. At the moment, if I click on one of the "show more" spans, all <li> checkboxes of all <ul> are shown. Is there a way (maybe with "$(this)") somehow to show only the correct <li> , even though classes are the same? Also, I want to hide the "show more" span if all <li> elements are shown, this is not working as well. The <span> stays visible after all checkboxes are shown. Any input would be very much appreciated. My simplified code, CSS and JQuery are:

{% for tag in tags %}
  <ul  id="filterlist" class="sidebar-ul">
        {% if current_tags contains tag %} 
             <li class="sidebarfilters">
                 <input  class="filter_checkbox" id="checked" type="checkbox" checked onClick="">         
            </li>     
       <span class="showmorefilters">mehr...</span></ul>
  </ul> 
{% endfor %} 

 $(function() { $(".showmorefilters").each(function() { $(this).click(function() { $('#filterlist li:hidden').show(); if ($('#filterlist li').length == $('#filterlist li:visible').length) { $(this).hide(); } }); }); });

 .sidebarfilters:nth-child(n+5) { display: none; }

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

Answer 1

Sounds like content is being created dynamically. Would advise using .on() versus .click() . Have to make a lot of assumptions without proper example.

Consider the following.

$(function() {
  $("ul[id^='filterlist']").on("click", ".showmorefilters", function(e) {
    var fl = $(this).parent();
    fl.find("li:hidden").show();
    if ($('li', fl).length == $('li:visible', fl).length) {
      $(this).hide();
    }
  });
});

This will bind a Click event to all .showmorefilters elements and perform a callback that is relative to that target.