Question

我希望切换某个类的第一个实例的可见性，但只能在单击的项目之后。

这就是我现在拥有的......

$(document).ready(function() {
    $('.showContentLink').click(function(){
        $(this).next('.showInfo').toggle();             
    });
    $('.showInfo').hide();
});

如果我点击showContentLink，则应在点击的项目之后找到第一个"showInfo"课程。

<a href="" class="showContentLink">show content</a>
<div class="stuff">some stuff</div>
<div class="stuff">some stuff</div>
<div class="showInfo">Show me</div>


<a href="" class="showContentLink">show content</a>
<div class="stuff">some stuff</div>
<div class="stuff">some stuff</div>
<div class="showInfo">Show me</div>

Answer 1

您可以使用.nextAll()，并缩小到第一个结果......

$(this).nextAll('.showInfo').first().toggle();

http://jsfiddle.net/5pNaR/

或.nextUntil()，然后是.last().next() ...

$(this).nextUntil('.showInfo').last().next().toggle();

http://jsfiddle.net/5pNaR/2/

Answer 2

你应该考虑改变你的html，如果事情是分组的，那么它们应该有一些共同的属性，或者包含在某种分组元素中。然而，本着挑战的精神，你正在寻找它：

$(this).nextAll('.showInfo').first().toggle;

.next()只会抓住下一个兄弟，永远不会更远，然后使用您的选择器进行过滤。你要做的是抓住所有以下兄弟姐妹.nextAll()，由选择器过滤，然后只保留第一个。

单击后查找头等名称

2 个答案: