Jquery查找具有特定数据属性的元素[重复]

Posted 2023-03-05

【中文标题】Jquery查找具有特定数据属性的元素[重复]

【英文标题】：Jquery Find element with specific data attribute [duplicate]

【发布时间】：2014-09-14 21:56:10

【问题描述】：

我可以使用什么函数来选择 class="rate_stars" 的子 div。

我有一个从 1 到 5 的变量范围，我想选择具有特定数据评级的子 div。

我试过了

 $('rate_widget').find().attr('data-rating', info).prevAll().andSelf().addClass('ratings_vote');

但它没有用。

<div id="r1" class="rate_stars"
                             data-post-id="<?php echo $post_id ?>"
                             data-user-id="<?php echo $user_id;  ?>"
                             data-nonce="<?php echo $nonce ?>"
                            >
    <div data-rating="1" class="ratings_stars"></div>
    <div data-rating="2" class="ratings_stars"></div>
    <div data-rating="3" class="ratings_stars"></div>
    <div data-rating="4" class="ratings_stars"></div>
    <div data-rating="5" class="ratings_stars"></div>
    <div class="total_votes">vote data</div>
</div>

【问题讨论】：

jQuery attribute selector?

【参考方案1】：

您可以使用 jQuery 中的属性选择器：

$('#r1').find('[data-rating="' + info + '"]')

参考：List of All jQuery Attribute Selectors

【讨论】：

谢谢它解决了我的问题。

我正在尝试将类添加到它的所有兄弟姐妹中，但是如果我将代码放在 script.js 中它不起作用，但是如果我将它写在控制台中，它就会完美地工作。

$('.rate_widget').find('[data-rating="' + INFO + '"]').prevAll().andSelf().addClass('ratings_vote');

@Epistemologist 您可能想为该问题打开一个新问题。元素是动态添加的吗？如果是这样，它们可能在脚本首次运行时不存在。此外，.andSelf() 在 1.8 中已弃用。您应该考虑使用新函数 .addBack() 代替它（需要 jQuery 1.8+）。

【参考方案2】：

这应该可以解决问题

var $div = $('.rate_stars div[data-rating="1"'])

如果需要，1 可以用动态表达式替换

【参考方案3】：

根据我的经验，另一种方法是对每个元素执行一个 jquery，然后检查数据属性，例如

$( ".ratings_stars" ).each(function( index ) 
    if($(this).data('rating') == 1)
         //Do Something
    
);

【讨论】：

这可行，但会为这个小任务增加过多的开销。另请注意，课程是ratings_stars（ratings 上的复数）...

非常正确，我从其他答案中学到了更多。感谢您指出错字