搜索 Jquery 元素的数据属性,部分匹配
Search data attribute of element with Jquery, with partial matches
我正在构建项目过滤器,使用输入字段和 on("keyup") 事件。它看起来像这样:
$("#inputFilter").on("keyup", filterPrograms);
在 class 中查找项目效果很好,如下所示:
<h6 class="programName">Science</h6>
但是,在其中一些 H6 中,我添加了一个数据属性,如下所示:
<h6 class="programName" data-tag="indigenous interdisciplinary ">Aboriginal Studies</h6>
我如何修改以下代码来过滤 class 的文本(当前有效)以及数据标签的内容?只要部分匹配不正确,这就会简单地隐藏父块“.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()
returns 一个布尔值。
所以改变这个。
dataResult = $(this).is('[data-tag*='+filter+']') < 0;
至此。
dataResult = $(this).is('[data-tag*="'+filter+'"]');
请注意,我还引用了属性匹配的字符串,这将允许查询包含空格。
我正在构建项目过滤器,使用输入字段和 on("keyup") 事件。它看起来像这样:
$("#inputFilter").on("keyup", filterPrograms);
在 class 中查找项目效果很好,如下所示:
<h6 class="programName">Science</h6>
但是,在其中一些 H6 中,我添加了一个数据属性,如下所示:
<h6 class="programName" data-tag="indigenous interdisciplinary ">Aboriginal Studies</h6>
我如何修改以下代码来过滤 class 的文本(当前有效)以及数据标签的内容?只要部分匹配不正确,这就会简单地隐藏父块“.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()
returns 一个布尔值。
所以改变这个。
dataResult = $(this).is('[data-tag*='+filter+']') < 0;
至此。
dataResult = $(this).is('[data-tag*="'+filter+'"]');
请注意,我还引用了属性匹配的字符串,这将允许查询包含空格。