如何制作一个独立的重复jQuery函数

Question

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

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

所以这个过滤器确实有效，但它过滤掉所有具有类filter-list_item的元素时有点过于兴奋。我认为在每个循环的父div上为类添加一个数字，然后在jQuery中添加一个for循环来针对这些特定的类可以解决这个问题。因此CCD_ 2和CCD_。然而，这做了完全相同的事情，并且仍然影响所有列表。我不知道为什么。任何关于如何使过滤器只过滤掉相应列表中的项目的帮助都将不胜感激。

这是当前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

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

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