Select element with particular data attributes with jQuery

Question

How can I select element with particular data attribute and special class with jQuery please ?

For example, I would like to select these elements:

<div data-roomid="55" data-status="NoData"></div>
<div data-roomid="55" data-status="Open"></div>
<div data-roomid="55" data-status="Close"></div>

But not this one:

<div data-roomid="55" data-status="Book"></div>

My try is the following one:

roomid = 55;
$('[data-roomid="'+ roomid +'"]').each(function(e) {

});

Thanks.

What is a `special class`? The term `class` has special meaning in html, so it's a bit confusing what you want. — Erik Philips, Apr 02 '19 at 01:38
https://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute — sc0rp10n.my7h, Apr 02 '19 at 01:38
One of the divs you want to select is identical to one you don't. — j08691, Apr 02 '19 at 01:39

score 1 · Accepted Answer · answered Apr 02 '19 at 01:45

You can use :not selector - see demo below:

var roomid = 55, status = 'Book';
$('[data-roomid="' + roomid + '"]:not([data-status=' + status + '])').each(function() {
  $(this).css({
    color: 'blue'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-roomid="55" data-status="NoData">NoData</div>
<div data-roomid="55" data-status="Open">Open</div>
<div data-roomid="55" data-status="Close">Close</div>
<div data-roomid="55" data-status="Book">Book</div>

score 0 · Answer 2 · answered Apr 02 '19 at 01:55

0

Is this what you're looking for?

$('div:not([data-status=Book])[data-roomid='+ roomid +']')

answered Apr 02 '19 at 01:55

alwayslearning

268
2
9

Select element with particular data attributes with jQuery

2 Answers2