jQuery selector for attributes with values greater than or less than an amount using > or <

Question

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?

Answer 1

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();