Select element in jQuery when one of two possible .data attributes has the desired value

Question

My question is rather simple but I couldn't find an existing answer:

I want to select a subset of elements if one of their two possible data attributes is "X".

My selector looks currently like this:

$('.line').data('identifier1', 'X');

I would like to add to the same selector .data('identifier2', 'X') using an OR statement, if that's possible with jQuery?

So the result should be that all .line elements are chosen if they have the value 'X' in either their data-identifier1 or data-identifier2.

Here is a snippet with only the OR statement missing:

let myCollection = $('.line').data('indentifier1', "X");

console.log(myCollection);

//myCollection should get divs 1,3,4 but not 2

user_401278 · Answer

You can use each() and a array to store each div inside

let DivsLine = $('.line');
let myCollection = new Array();

$(DivsLine).each(function(index, value){
  let identifier1 = $(this).data('identifier1');
  let identifier2 = $(this).data('identifier2');
  
  if (identifier1 == 'X' || identifier2 == 'X') {
    myCollection.push($(this).text());
  }
});

console.log(myCollection);

user_13767757 · Answer

You can query data attributes like this and use , as an or.

 let myCollection = $('.line[data-identifier1="X"],.line[data-identifier2="X"]');
 console.log(myCollection);

Select element in jQuery when one of two possible .data attributes has the desired value

2 Answers