我有一个嵌套的复选框列表,我需要根据文本框输入与标签值的比较来过滤它们。该列表如下所示,但要大得多:
fiddle :https://jsfiddle.net/y9qqgjp5/
但是,我在处理其中的嵌套部分时遇到了麻烦。正如我现在所拥有的,如果您去搜索用户(第二级项目),父级将被隐藏,因为它不匹配,从而使子级也被隐藏。它可以很好地对父级进行过滤。
这是我正在过滤的简化结构。
HTML:
<input type="text" id="filter" />
<span class="checkbox-list">
<ul>
<li>
<label>Item1</label>
<ul>
<li>
<label>Item2</label>
</li>
<li>
<label>Item3</label>
</li>
<li>
<label>Item4</label>
</li>
<li>
<label>Item5</label>
</li>
</ul>
</li>
<li>
<label>Item6</label>
</li>
<li>
<label>Item7</label>
<ul>
<li>
<label>Item4</label>
</li>
<li>
<label>Item8</label>
</li>
</ul>
</li>
</ul>
</span>
JQuery:
$('#filter').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('.checkbox-list > ul > li > label').parent().show();
} else {
$('.checkbox-list > ul > li > label').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
});
};
if (valThis == "") {
$('.checkbox-list > ul > li > ul > li > label').parent().show();
} else {
$('.checkbox-list > ul > li > > ul > li > label').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
});
};
});
感谢任何帮助。我无法理解其中的嵌套部分。
最佳答案
尝试使用parents()
var labels = $('label'); // cache this for better performance
$('#filter').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
labels.parent().show(); // show all lis
} else {
labels.each(function() {
var label = $(this); // cache this
var text = label.text().toLowerCase();
if (text.indexOf(valThis) > -1) {
label.parents('li').show() // show all li parents up the ancestor tree
} else {
label.parent().hide(); // hide current li as it doesn't match
}
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="filter" />
<span class="checkbox-list">
<ul>
<li>
<label>Item 1</label>
<ul>
<li>
<label>Item 12</label>
</li>
<li>
<label>Item3</label>
</li>
<li>
<label>Item4</label>
</li>
<li>
<label>Item5</label>
</li>
</ul>
</li>
<li>
<label>Item6</label>
</li>
<li>
<label>Item7</label>
<ul>
<li>
<label>Item4</label>
</li>
<li>
<label>Item8</label>
</li>
</ul>
</li>
</ul>
</span>
关于JQuery - 根据文本框输入过滤嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48690039/