如何检查data-attribute是否不包含带有:contains的jQuery字符串

Is it possible to apply :not(:contains()) selector to data-attribute? Here is what I have in HTML:

是否可以将:not(:contains()选择器应用到data-attribute?以下是我在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>

What I'd like to do is to filter it on click based on what is inside of data-stringtofind attribute. I'm trying with this code, but it's not working.

我想做的是根据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')");

});

Here is what the console outputs:

控制台输出如下:

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

Am I doing some simple mistake or this just isn't possible to do with :not:contains?

我是不是犯了一个简单的错误，或者这和:not:contains是不可能的?

This code works, but it searches inside of the div, not inside of the data-stringtofind attribute.

此代码可以工作，但它在div中搜索，而不是在data-stringtofind属性中搜索。

$('#find2').on('click', function () {
    var findthis = $('#keyword').val();

    console.log(findthis);

    $( ".list_item:not(:contains("+ findthis +"))").hide();
    console.log(".list_item.data('stringtofind')");

});

Here is a fiddle: https://jsfiddle.net/mk7yr62k/2/

这里有一个小提琴:https://jsfiddle.net/mk7yr62k/2/

3 个解决方案

#1

:contains isn't related to attributes at all. You want an attribute substring selector:

:contains与属性没有任何关系。你需要一个属性子字符串选择器:

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

[data-stringtofind*='xxx'] means "xxx anywhere in the data-stringtofind attribute." And of course, :not negates it.

[data-stringtofind*='xxx']表示“data-stringtofind属性中的任何地方的xxx”。当然，不是否定的。

Here's an example:

这里有一个例子:

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>

#2

:contains is used to find an element by the text it contains, not the contents of an attribute, and hence is not suitable for what you require.

:包含用于在包含的文本中查找元素，而不是属性的内容，因此不适合您所需要的内容。

An alternative would be the attribute contains selector, but this will match on spaces too - ie. bc de would hit your first element.

另一种选择是属性包含选择器，但这也将在空间上匹配。bc de会击中你的第一个元素。

To fix this you could use filter() and convert the data attribute of each element to an array and use indexOf() to find a match. Try this:

要解决这个问题，可以使用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;
    });
});

Working example

工作示例

#3

Try this, it searches for your string in each .list_item and hides it if there's no match.

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

$('#find1').on('click', function () {
    var findthis = $('#keyword').val();

    $(".list_item").each(function() {
        if ($(this).data('stringtofind').indexOf(findthis) == -1)
            $(this).hide();
    });
});

#1