选择具有特定属性 JQUERY 的 .next() 元素答案

【问题标题】：Select the .next() element with a specific attribute JQUERY选择具有特定属性 JQUERY 的 .next() 元素
【发布时间】：2011-10-13 00:33:22
【问题描述】：

这就是我所拥有的：

$("#comment").next().attr('shown',0).fadeIn();

我正在尝试显示页面上隐藏的下一条评论。但是，我正在尝试一次显示两个 cmets，因此如果单击第一个，则接下来是第二个。所以我给出了一个 shown 属性。我想选择属性为shown=0 的NEXT。以上不起作用。我相信它会是next(tr[shown=0])，但我无法让它工作（我在一张桌子上寻找下一行）

感谢任何帮助！

【问题讨论】：

可能是因为“显示”不是 HTML 中的默认属性吗？尝试使用 Id 、类或名称。

标签： jquery select attributes next

【解决方案1】：

next 只能返回直接的下一个兄弟。

您可以调用nextAll，它返回所有后续兄弟，使用:first 选择器获取第一个匹配的：

$(...).nextAll("tr[shown=0]:first")

【讨论】：

【解决方案2】：

SLaks 的答案会起作用，但我会考虑不要在您的 HTML 中使用自定义属性，因为这可能会让其他开发人员感到困惑。像这样的东西不会使用自定义属性：

<style>
.hidden {
    display:none;   
}
</style>

<script>
$(document).ready(function(){ 
   $('.showmore').click(function(){ 
       $(this).parent().nextAll(':hidden:first').removeClass('hidden');
   })
});
</script>

<div id="comments">
<div class="comment" id="comment1">
    Test comment        
    <a href="#" class="showmore">Show More</a>
</div>
<div class="comment" id="comment2">
    2nd test comment
    <a href="#" class="showmore">Show More</a>
</div>
<div class="comment hidden" id="comment3">
    3rd test comment
</div> 
<div class="comment hidden" id="comment4">
    4th test comment
</div>   
</div>

Demo

【讨论】：

【解决方案3】：

我知道这是一篇旧帖子，但只是按照标题，第一个答案让我失望。但是@SLaks 的答案正是我个人所寻找的并解决了我的问题。

这实际上对我在完全不同的情况下帮助很大，而只是碰巧找到了这篇文章。这个答案是他的回答中提到的最好的答案。

我遇到的问题类似于下面的问题，我必须从特定属性中进行选择，才能获得具有相似属性名称但值不同的下一个属性。

<div class="blah" data-field="sometext" data-index="0"></div>
<div class="bar"></div>
<div class="blah" data-field="sometext" data-index="1"></div>


$("div[data-field='sometext'][data-index='0']")
    .nextAll("div[data-field='sometext']:first");

以上回报

  <div class="blah" data-field="sometext" data-index="1"></div>

希望这对其他人有帮助，因为它极大地帮助了我

【讨论】：