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

Question

Is it possible to apply :not(:contains()) selector to data-attribute? Here is what I have in 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.

$('#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?

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

$('#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/

Answer 1

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

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

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

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> 

Answer 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.

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:

$('#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

Answer 3

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

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

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