如何使独立的重复jQuery函数

Question

我一直在为一个简单的无序列表在jQuery中编写一个过滤器函数。每个列表都在一个带过滤器的块中，该过滤器可以在后端(Wordpress)中修改，以过滤出特定的字符串。过滤器还具有一个重置按钮，将其设置为原始状态。

现在我被要求做一个可重复的列表。重复列表本身并不是一个问题，但过滤器现在过滤掉所有现有列表中的项目。

因此，过滤器确实可以工作，但它得到了一些过度兴奋，过滤掉了具有类filter-list_item的所有元素。我认为在每个循环的父div上向类添加一个数字，然后在jQuery中添加一个for循环来针对这些特定的类来解决这个问题。因此产生了$list_count和listCount变量。然而，这做了完全相同的事情，仍然影响所有的列表。我不知道为什么。任何帮助，如何使它，以便过滤器只过滤在他们相应的列表中的项目，将不胜感激。

这是过滤器函数的当前jQuery：

$(document).ready(function (){

// Content filter
var lists = $(".filter-list").length;

for(var listCount = 0; listCount < lists; ) {

    $(".filter-list-"+listCount).find(".content-filter").change(function() {
      // Retrieve the option value and reset the count to zero
      var search = $(this).val(), count = 0;

      $(".filter-list_item").each(function(){
        // Remove item if it does not match the value
        var string = this.innerText;
        var found = strSearch(search.toLowerCase(), string.toLowerCase());

        if (found) {
          $(this).css("display", "block");
          // Show the list item if the value matches and increase the count by 1
          count++;
        } else {
          $(this).css("display", "none");
        }

        // Show reset button
        if($(this).index() > 0) {
          $(".filter-reset").addClass("active");
        }
      });

      // Update the count
      if(count == 0) {
        $(".filter-select-results").text("No results for " +search);
      } else if(count > 0) {
        $(".filter-select-results").text('');
      }
    });

    // Reset filter
    $(".filter-reset").click(function() {
      $(".content-filter").prop('selectedIndex',0);
      $(".filter-list_item").css("display", "block");
      $(".filter-reset").removeClass("active");
      $(".filter-select-results").text('');
    });

    listCount++;
}
});

// Search function
function strSearch(search, string) {
  var n = string.search(search);

  if(n >= 0) {
      return true;
  }

  return false;
}

这是用来构建列表的PHP

<?php
$list_count = 0;
foreach ($layout['list'] as $list) { ?>
    <div class="container filter-list filter-list-<?php echo $list_count++; ?>">
        <div class="title-wrapper">
            <h2><?php echo $list['title']; ?></h2>
            <?php echo $list['description'];

            // Content filter
            if($list['content_filter'] == true) { ?>
                <div class="filter-container">
                    <button class="filter-reset"><i class="fa-icon fa fa-undo"></i></button>
                    <select class="content-filter" name="filterselect">
                        <option value="all" disabled selected>Selecteer een locatie</option>
                        <?php foreach($list['filter_options'] as $filter) { ?>
                            <option value="<?php echo $filter['option']; ?>"><?php echo $filter['option']; ?></option>
                        <?php } ?>
                    </select>
                </div>
            <?php } ?>
        </div>
        <div class="filter-select-results"></div>
        <ul class="filter-list_items">
            <?php foreach($list['list_items'] as $list_item) { ?>
                <?php if( $list_item['link'] ) { ?>
                    <li class="filter-list_item"><a href="<?php echo $list_item['link']; ?>" class="<?php echo $filterClass ?>"><?php echo $list_item['item']; ?></a></li>
                <?php } else { ?>
                    <li class="filter-list_item">
                        <span><?php echo $list_item['item']; ?></span>
                    </li>
                <?php } ?>
            <?php } ?>
        </ul>
    </div>

Answer 1

将$(".filter-list_item").each(function(){替换为$(this).closest(".filter-list").find(".filter-list_item").each(function(){

这是假设.content-filter-element是.filter-list的一部分。然后，closest导航到满足条件的第一个父级。从您显示的php代码来看，该条件是否成立还有点不清楚。