[英]JQuery - Filter nested list based on textbox input
我有一个嵌套的复选框列表,需要根据与标签值相比的文本框输入将其过滤掉。 列表看起来像这样,但要大得多:
小提琴: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.