Javascript 如何创建独立的重复jQuery函数

我一直在使用jQuery中的一个过滤器函数来处理一个简单的无序列表。每个列表都在一个块中，块中有一个过滤器，可以在后端（Wordpress）中修改该过滤器以过滤掉特定的字符串。过滤器还有一个重置按钮，可将其设置回原始状态

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

因此，过滤器确实可以工作，但它会过度兴奋地过滤掉所有具有类

filter-list\u项

的元素。我认为在每个循环的父div上向类添加一个数字，然后在jQuery中添加一个for循环来针对这些特定的类可以解决这个问题。因此，

$list\u 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;
}

$（文档）.ready（函数（）{
//内容过滤器
变量列表=$（“.filter list”）.length；
对于（var listCount=0；listCount0）{
$（“.filter reset”）.addClass（“活动”）；
}
});
//更新计数
如果（计数=0）{
$（“.filter select results”）.text（“无“+搜索结果”）；
}否则，如果（计数>0）{
$（“.filter select results”）.text（“”）；
}
});
//复位滤波器
$（“.filter reset”）。单击（函数（）{
$（“.content filter”）.prop（'selectedIndex'，0）；
$（“.filter-list_item”）.css（“显示”、“块”）；
$（“.filter reset”）.removeClass（“活动”）；
$（“.filter select results”）.text（“”）；
});
listCount++；
}
});
//搜索功能
函数strSearch（搜索，字符串）{
var n=string.search（搜索）；
如果（n>=0）{
返回true；
}
返回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>

选择所有位置

替换

$（“.filter-list\u item”）。每个（function（）{

替换为

$（this）。最近的（“.filter-list”）。查找（“.filter-list\u item”）。每个（function（）{

---

这是假设

.content filter

-元素是

的一部分。filter list

最近的

然后导航到满足条件的第一个父级。从您显示的php代码来看，该条件是否成立有点不清楚。

哪里是

$（“.filter list-”+listCount）的HTML

已创建？我认为您需要更改

$（“.filter-list\u item”）。每个（函数（）{

只在那些子列表上工作。

我试图保持简短，只显示相关代码，但注意到我忘了在php中添加过滤器，对不起。我在php中添加了创建过滤器的部分。我会看看你的建议是否有效。可能是吧！是的，你修复了它。
$（这个）。最近的（.filter list”）。查找(“.filter-list_item”）。每个（function（）{
都成功了，谢谢！