Question

我有一个包含班级.item-wrap

的div列表

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

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

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

如何修改当前代码以选择.item-wrap大于0的第一个data-amount？

Answer 1

使用filter功能，我们可以限制搜索。要通过它的数据属性选择元素，jQuery有一个方便的data()函数。

这可能会显示多个结果，如我的示例所示。要获得第一个，您可以使用first方法。

＆＃13;

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

＆＃13;

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

＆＃13;

一些笔记

如果您的数据属性不仅包含数字，则此代码将无效。这假设您的所有data-amounts都有一个与正则表达式匹配的值：\A\d*\z
如果字符串与特定模式匹配，则可以将字符串与数字进行比较。这是因为JavaScript执行自动类型转换。在这个例子中，它相当微不足道，因为我们没有很多数据。但是，如果你有更多的div，你可能想做+$(this).data("amount") > 0

Answer 2

您可以使用each()迭代元素并使用return false;退出循环

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

        // Breakout
        return false;
    }
});

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

2 个答案: