無法找到下一個元素

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(); 
 
});