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: /

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/mk7yr62k/2/

• javascript
• jquery

• Is it possible to apply :not(:contains()) selector to data-attribute? Simple answer is You can't – Satpal Commented Jul 18, 2016 at 10:37
• 1 You need to use an attribute selector (.list-item[data-stringtofind]') rather than trying to use the data() method. But, that said, I'm still struggling to try and interpret the intent of your selector. – David Thomas Commented Jul 18, 2016 at 10:37
• You could use the attribute contains selector, but be aware it would match on spaces too, ie. bc de would hit your first element. – Rory McCrossan Commented Jul 18, 2016 at 10:39

3 Answers 3

: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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

: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

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();
    });
});