无法找到下一个元素

Question

我想在页面上有多个元素，当单击标题范围时，这些元素将切换下一个内容范围的可见性。准备好所有内容跨度内容。

内容的切换在定位整个类时起作用，但在尝试从被单击的标题范围尝试定位下一个内容跨度元素时不起作用。

，因为我们试图操纵通过Telerik的radeditor进入

http://jsfiddle.net/hn5ss2au/

HTML

<p> 
    <span class="collapsibleHeader">Content Header</span><br /> 
    <span class="collapsibleContent">Sed dignissim velit non congue consequat.</span> 
</p> 

<p> 
    <span class="collapsibleHeader">Content Header</span><br /> 
    <span class="collapsibleContent">Sed dignissim velit non congue consequat.</span> 
</p> 

JQuery的

$(document).ready(function() { 
$('.collapsibleContent').hide(); 
    $('.collapsibleHeader').click(function (e) { 
     $(this).parent().next('.collapsibleContent').toggle(); 
     e.preventDefault(); 
    }); 
}); 

Answer 1

你要去文本的特殊标记被用于上升一级，到p元素，然后next到下一个元素（请参阅下一个注释），但.collapsibleContent是该p和<br/>实际上是next()元素到p（因此过滤器不匹配任何东西）的子元素。 next()只能返回下一个元素，然后应用筛选器以查看它是否匹配。

降parent()和使用nextAll()您选择：

$(document).ready(function() { 
    $('.collapsibleContent').hide(); 
    $('.collapsibleHeader').click(function (e) { 
     $(this).nextAll('.collapsibleContent').toggle(); 
     e.preventDefault(); 
    }); 

    $('.collapsibleContent2').hide(); 
    $('.collapsibleHeader2').click(function (e) { 
     $('.collapsibleContent2').toggle(); 
     e.preventDefault(); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/hn5ss2au/3/

您可以使用siblings()用相同的过滤器，但它比nextAll()慢。如果碰巧有多于一次的每场比赛，还加入first()

例如，

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

注：nextall大于siblings()和parent().children()替代更快：http://jsperf.com/jquery-next-vs-siblings/5

Answer 2

为什么旁边没有工作的原因是因为你使用parent()。

在click回调函数中，您打电话$(this).parent()。当回拨被呼叫时，$(this)将为.collapsibleHeader，因此当您拨打.parent()时，它将返回p标记。

要获得.collapsibleContent您必须致电.children('.collapsibleContent')而不是.next()。

你的代码如下：

$(this).parent().children('.collapsibleContent').toggle(); 

的jsfiddle：http://jsfiddle.net/qetcd7o4/

Answer 3

访问父，然后的.next（）将让你的下一个段落元素，而不是您的内容。在这种情况下没有必要击中父母。您需要获取具有类.collapsibleContent的clicked元素的兄弟。接下来点击elem也不会工作，因为技术上你的下一个elem在头后是一个中断标签。下面将做的伎俩：

$('.collapsibleHeader').click(function (e) { 
 
    e.preventDefault(); 
 
    $(this).siblings('.collapsibleContent').toggle(); 
 
});