特定のクラスと次の2つの要素をラッパークラスでラップするには

Question

クラスに.wrapAllとしたい一貫したマークアップのスニペットがあります。 <h2>と次の2つの要素を特定しようとしています。

このスニペットの前と後に来る要素が一致していないので、私は次の<h2>などに.nextを使用することはできませんが、<h2>上.UniqueClassは私が上のキーができると思う何かありますか？

私は以下を試しましたが、動作しません。
<h2>、<p>、およびdiv.accordionを1つのクラスでどのようにラップしますか？

var $set = $('h2.uniqueClass').children(); 
 
for (var i = 0, len = $set.length; i < len; i += 2) { 
 
    $set.slice(i, i + 2).wrapAll('<div class="test"/>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2 class "uniqueClass">Headline</h2> 
 
<p>A p tag always follows.</p> 
 
<div class="accordion">An accordion always comes after the p tag.</div>

Answer 1

あなたは行方不明=最初の要素の 'クラス=' です

回答のカップルがhereとhere $(".uniqueClass").next().andSelf().next().andSelf().wrapAll('<div class="test"/>');

または

このトピックにあります。

var $set = $('.content').children();  
for(var i=0, len = $set.length; i < len; i+=3){ 
    $set.slice(i, i+3).wrapAll('<div class="test"/>'); 
} 

Answer 2

同じ考えの別のバリエーション...

そのHTMLパターンは、ページ全体で繰り返されている場合は、各ブロックに式を適用するためにjQueryのeach()を使用することもできます。 2つ以上の兄弟またはそれより少ない数の兄弟でヘッダーを処理する柔軟性を追加することもできます。各.uniqueClassに対して

、私は:lt()によってフィルタリングnextUntil()、addBack()、およびwrapAll()を使用しています。

英語で：各.uniqueClassについては、次のすべての兄弟を次の.uniqueClassまで見つけ、2人の兄弟に制限し、元のセレクターをセットに追加し、セットをラッパー要素でラップします。

var $wrapper = jQuery('<div>', { 
 
    'class': 'wrapper' 
 
}); 
 

 
jQuery('.uniqueClass').each(function() { 
 
    jQuery(this).nextUntil('.uniqueClass', ':lt(2)').addBack().wrapAll($wrapper); 
 
});

.wrapper { 
 
    background-color: lightgreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2 class="uniqueClass">Headline</h2> 
 
<p>A p tag always follows.</p> 
 
<div class="accordion">An accordion always comes after the p tag.</div> 
 
<p>But not this one.</p> 
 
<div>And not this one.</div> 
 

 
<h2 class="uniqueClass">Headline</h2> 
 
<p>A p tag always follows.</p> 
 
<div class="accordion">An accordion always comes after the p tag.</div> 
 
<ul> 
 
    <li>But not this one.</li> 
 
    <li>Nor this one.</li> 
 
</ul> 
 

 
<h2 class="uniqueClass">Headline</h2> 
 
<p>Maybe this block doesn't have two siblings. That's ok.</p> 
 

 
<h2 class="uniqueClass">Headline</h2> 
 
<span>One</span> 
 
<span>Two</span> 
 
<span>Three</span>