jQuery选择器，用于值大于或小于使用＆gt;的值的属性或者＆lt;

Question

我有一些像上面这样的div

<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>

在Jquery中，我能够显示数据成人=特定值的div

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

我想做的是这样的事情

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

我想要完成的更好的事情就是为例子而做。

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

如何编写这样的查询，我是否必须使用对象？如何？

Answer 1

由于您无法通过属性选择器完成此操作（就像您尝试这样做），您必须遍历元素并进行检查。

例如，您可以使用.filter() method返回data-adult属性值大于或等于3的元素：

Example Here

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

---

对于第二个查询，您可以使用：

Example Here

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