jQuery选择器用于值大于或小于使用>或<的值的属性

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()方法返回data-adult属性值大于或等于3 的元素:

这里的例子

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

对于第二个查询,您可以使用:

这里的例子

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