CODEWITHSUNDEEP
jquerycustom-data-attribute
user2291466
user2291466

Reputation: 1

Data Attribute Selectors and jQuery

I have a group of items with a data attribute that contains an array of categories:

<div class="result" data-categories="category-1, category-2, category-3" data-type="logo" data-preview="images/previews/preview.jpg">

I'm having trouble selecting elements WITHOUT the value that I'm passing in, from the data-categories group.

$(".media-results .result:not([data-categories*=" + val + "])");

This seems to work ok, but when I change the select element that uses this selector, I get strange, undesirable results(the selector seems to run infinitely and the page keeps hiding and showing elements at random).

Any help from anyone?

Edit: here is the function that the select passes the value to:

allResults.animate({
        opacity: 0
    }, 500, function(){
        console.log("Change triggered. All results hidden.");
        notSelected.hide(50, function(){
            console.log("Unwanted items hidden");
            selected.show().animate({ opacity: "1" }, 500);
        });
    });

Upvotes: 0

Views: 146

Answers (1)

Adil
Adil

Reputation: 148180

You can use filter() 

elements = $(".media-results .result").filter(function(){
    return $(this).data("categories").indexOf(val) == -1
});

Upvotes: 1

Related Questions