[英]Search data attribute of element with Jquery, with partial matches
我正在使用输入字段和on(“keyup”)事件构建项目过滤器。 它看起来像这样:
$("#inputFilter").on("keyup", filterPrograms);
它很适合在类中查找项目,如下所示:
<h6 class="programName">Science</h6>
但是,在其中一些H6中,我添加了一个数据属性,如下所示:
<h6 class="programName" data-tag="indigenous interdisciplinary ">Aboriginal Studies</h6>
如何修改以下代码以过滤类的文本(当前正在工作)以及数据标记的内容? 只要部分匹配不为真,这就会隐藏父块'.mix'。 这是我的功能:
function filterPrograms(event) {
// Retrieve the input field text
var filter = $('#inputFilter').val();
// Loop through the blocks
$(".programName").each(function(){
// this part isn't working!!
dataResult = $(this).is('[data-tag*='+filter+']') < 0;
// If the item does not contain the text phrase, hide it
textResult = $(this).text().search(new RegExp(filter, "i")) < 0;
if (textResult || dataResult) {
$(this).closest(".mix").hide();
} else {
$(this).closest(".mix").show();
}
});
}
现在,我很确定这是因为.is()永远不会完全匹配,这就是我需要部分匹配的原因。 在上面的例子中,输入“indi”应该对data-tag属性的内容提供肯定的结果; 这不起作用。 键入“abo”匹配textResult,并正常工作。
我知道我错过了什么,但阅读文档(和SO)对此没有帮助。 提前致谢。
编辑:这是@ Triptych解决方案的工作功能:
$(".programName").each(function(){
// If the item does not contain the text phrase hide it
dataResult = $(this).is('[data-tag*="'+filter+'"]');
textResult = $(this).text().search(new RegExp(filter, "i")) < 0;
if (textResult && !dataResult) {
$(this).closest(".mix").hide(); // Hide the item if there are no matches
} else {
$(this).closest(".mix").show(); // Show the item if there are matches
}
});
好吧,有一件事,你无法将.is()
的结果与0
进行比较。 is()
返回一个布尔值。
所以改变这个。
dataResult = $(this).is('[data-tag*='+filter+']') < 0;
对此。
dataResult = $(this).is('[data-tag*="'+filter+'"]');
请注意,我还引用了属性匹配的字符串,这将允许查询包含空格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.