隱藏2個h2標籤之間的所有內容？

Question

我有以下的html代碼片段;

<h2>Headline 1</h2> 
<p>Lorem ipsum bla bla</p> 
<p>Lorem ipsum bla bla</p> 
<p>Lorem ipsum bla bla</p> 

<h2>Headline 2</h2> 
<p>Lorem ipsum bla bla</p> 

<h2>Headline 3</h2> 
<p>Lorem ipsum bla bla</p> 
<p>Lorem ipsum bla bla</p> 

我希望以某種方式，通過jQuery的目標每個「塊」，所以我可以附加一個div圍繞它。 「塊」是指在下一個h2開始標記之前的所有在h2開始標記和下一個p標記之間的代碼。該部分中的最後一個h2標籤應該帶上最後一個p標籤。

任何關於我如何最好地做到這一點的建議？

Answer 1

嘗試：

$('h2').each(function() { 
    $(this).nextUntil('h2').add(this).wrapAll('<div class="foo">'); 
});​ 

http://jsfiddle.net/RUKDj/

Answer 2

如果您只想隱藏兩個h2之間的所有元素，請嘗試使用.nextUntil。

DEMO

$('h2').nextUntil('h2').hide(); 

如果你想隨時隨地塊B/W 2 h2那麼你可以使用，

DEMO

$('h2').each (function() { 
    $(this).nextUntil('h2').wrapAll('<div class="hidden">'); 
});