8

I have a few div elements like:

<div class="roomnamecta" data-price="1189" data-adult="3">Room 1</div>
<div class="roomnamecta" data-price="578" data-adult="1">Room 2</div>
<div class="roomnamecta" data-price="650" data-adult="2">Room 3</div>

In jQuery I'm able for example to display div which data-adult= a specific value

// init (first I'm hiding all my divs)
$('.roomnamecta').hide();
// now I'm just showing depending on "data-adult" value
$('.roomnamecta[data-adult="3"]').show();

What I would like to do is something like this:

$('.roomnamecta[data-adult>="3"]').show();
// doesn't work

And better what I want to accomplish is to do for example:

$('.roomnamecta[data-adult>="3"],.roomnamecta[data-price>="1100"]').show();

How to write such a query, do I have to use object? How?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
user367864
  • 283
  • 2
  • 5
  • 11
  • Possible duplicate of [jQuery: Selecting all elements where attribute is greater than a value](http://stackoverflow.com/questions/2613648/jquery-selecting-all-elements-where-attribute-is-greater-than-a-value) – Jason C Jul 18 '16 at 20:41

1 Answers1

18

Since you can't accomplish this with an attribute selector (like you're trying to do), you would have to iterate over the elements and check.

For instance, you could use the .filter() method to return the elements whose data-adult attribute value is greater than or equal to 3:

Example Here

$('.roomnamecta[data-adult]').filter(function () {
    return $(this).data('adult') >= 3;
}).show();

For your second query, you could use:

Example Here

$('.roomnamecta[data-adult], .roomnamecta[data-price]').filter(function () {
    return $(this).data('adult') >= 3 || $(this).data('price') >= 1100;
}).show();
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304