查找第一个具有数据属性大于零的元素 JQuery

Question

我有一个带有类.item-wrap的

元素列表。

目前，我使用以下代码选择第一个

元素：

$(".item-wrap:first").trigger( "click" );   

每个 .item-wrap 都有一个 data-amount 属性。

我怎样修改当前的代码，才能选择第一个 .item-wrap 且其 data-amount 大于0？

- Belgin Fish

Answer 1

使用filter函数，我们可以限制搜索范围。要通过数据属性选择元素，jQuery提供了方便的data()函数。

这可能会显示多个结果，就像我的示例一样。要获取第一个结果，您可以使用first方法。

$("div").filter(function() {
  return $(this).data("amount") > 0;
}).first().css({"color": "green"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-amount="-7">On Tuesday I lost 7 dollars gambling</div>
<div data-amount="-3">On Wednesday, I lost 3 dollars gambling</div>
<div data-amount="37">On Thursday, I actually won 37 dollars</div>
<div data-amount="16">I'm on a roll. Won 16 more dollars today</div>

一些注意事项

• 如果你的数据属性不仅包含数字，那么这段代码将无法工作。假设你所有的data-amounts都有一个与正则表达式匹配的值：\A\d*\z

• 如果字符串匹配了特定的模式，那么可以将其与数字进行比较。这是因为JavaScript执行自动类型转换。在这个例子中，这相当简单，因为我们没有太多的数据。然而，如果你有更多的

  ，你可能想做一些像+$(this).data("amount") > 0的事情

- Richard Hamilton

Answer 2

您可以使用 each() 来遍历元素，通过使用 return false; 退出循环。

$('.item-wrap').each(function() {
    if (+$(this).data('amount') > 0) {
        // Do "Hello World" here
        $(this).trigger('click');

        // Breakout
        return false;
    }
});

- Tushar