如何在jQuery中检查数据属性是否不包含带:contains的字符串

Question

是否可以将:not(:contains())选择器应用于数据属性？以下是我在HTML中的内容：

<input id="keyword">
<button id="find1">Find - 1</button>
<button id="find2">Find - 2</button>
<div class="list_item" data-stringtofind="abc def">abc def</div>
<div class="list_item" data-stringtofind="ghi jkl">ghi jkl</div>
<div class="list_item" data-stringtofind="mno prs">mno prs</div>

我想做的是在点击时根据data-stringtofind属性内部的内容对其进行过滤。我正在尝试使用此代码，但它不起作用。

$('#find1').on('click', function () {
    var findthis = $('#keyword').val();
    console.log(findthis);
    $( ".list_item.data('stringtofind'):not(:contains("+ findthis +"))").hide();
    console.log(".list_item.data('stringtofind')");
});

以下是控制台输出的内容：

Error: Syntax error, unrecognized expression: .list_item.data('stringtofind'):not(:contains(abc))

我是在犯一些简单的错误，还是这不可能与：不：包含有关？

这段代码有效，但它在div内部搜索，而不是在datastringfind属性内部搜索。

$('#find2').on('click', function () {
    var findthis = $('#keyword').val();
    console.log(findthis);
    $( ".list_item:not(:contains("+ findthis +"))").hide();
    console.log(".list_item.data('stringtofind')");
});

这是一把小提琴：https://jsfiddle.net/mk7yr62k/2/

Answer 1

:contains根本与属性无关。您需要一个属性子字符串选择器：

$( ".list_item:not([data-stringtofind*='" + findthis + "'])").hide();

[data-stringtofind*='xxx']的意思是"data-stringtofind属性中的xxx"。当然，:not否定了它。

这里有一个例子：

var p = $("<p>").text("Waiting briefly...").appendTo(document.body);
setTimeout(function() {
  var findthis = "abc";
  $( ".list_item:not([data-stringtofind*='" + findthis + "'])").hide();
  p.text("Hid the ones not matching 'abc'");
}, 500);

<div class="list_item" data-stringtofind="abc def">abc def</div>
<div class="list_item" data-stringtofind="ghi jkl">ghi jkl</div>
<div class="list_item" data-stringtofind="mno prs">mno prs</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

:contains用于根据元素所包含的文本而不是属性的内容来查找元素，因此不适合您的需求。

另一种选择是属性包含选择器，但这也会在空格上匹配——即bc de会命中第一个元素。

要解决此问题，可以使用filter()并将每个元素的数据属性转换为数组，然后使用indexOf()查找匹配项。试试这个：

$('#find1').on('click', function () {
    var findthis = $('#keyword').val();
    $('.list_item').filter(function() {
        var arr = $(this).data('stringtofind').split(' ');
        return arr.indexOf(findthis) != -1;
    });
});

工作示例

Answer 3

试试这个，它会在每个.list_item中搜索您的字符串，如果没有匹配，就会隐藏它。

$('#find1').on('click', function () {
    var findthis = $('#keyword').val();
    $(".list_item").each(function() {
        if ($(this).data('stringtofind').indexOf(findthis) == -1)
            $(this).hide();
    });
});