Question

I have a search function that can quite happily search through a list divs for one data-attribute, below is the code that is working.

$(".classToSearch").each(function(){
    if ($(this).attr('data-attribute1').search(new RegExp(filter, "i")) < 0) {
        $(this).animate({opacity:0.1},100);
    } else {
        $(this).animate({opacity:0.5},100);
    }
});

What I would like for the search function is to be able to search through multiple data-attributes. I’ve tried a range of different formats but I can’t get it to work. Below is what I thought it should look like.

$(this).attr('data-attribute1','data-attribute2','data-attribute3')

or

$(this).attr('data-attribute1'||'data-attribute2'||'data-attribute3')

But I’m thinking I’m going to need a for loop of some kind. Any help would be appreciated.

———-EDIT————-

MY SOLUTION
This allows the search box to search all the data attributes.

$(".classToSearch").each(function(){
        if ($(this).attr('data-attribute1').search(new RegExp(filter, "i")) < 0 &&
            $(this).attr('data-attribute2').search(new RegExp(filter, "i")) < 0 &&
            $(this).attr('data-attribute3').search(new RegExp(filter, "i")) < 0 &&         
            ) {
            $(this).animate({opacity:0.1},100);
        } else {
            $(this).animate({opacity:0.5},100);
        }
    });

Answer 1

You could use .data() to access those attributes a little easier and then collect them into an array from which you perform the regular expression test on each of them:

var $this = $(this),
attribs = [$this.data('attribute1'), $this.data('attribute2'), $this.data('attribute3')],
re = new RegExp(filter, "i");

if (attribs.some(function() {
    return this.match(re);
})) {
    // some attributes matched the filter
} else {
    // no attributes matched the filter
}

See also: Array.some()