JQueryを使用して複数のHTML要素に要素をラップします

Question

ページにHTMLを追加する必要がありますが、HTML自体を直接制御できないため、JQueryを使用しようとしています。

この

は、既存の、生成されたHTML（簡体字）である： .testimonialsが表示されますどこ

<div class="curriculum>Content</div> 
<div class="curriculum">Content</div> 
<div class="testimonial">Content</div> 
<div class="testimonial">Content</div> 
<div class="testimonial">Content</div> 
<div class="curriculum>Content</div> 
<div class="curriculum">Content</div> 

、私はそれらすべてのグループに必要と出力がどのように見えるので、HTMLでラップ：

<div class="curriculum>Content</div> 
<div class="curriculum">Content</div> 

    <div> 
    <div> 
     <h2>Testimonials</h2> 
     <div> 

     <div class="testimonial">Content</div> 
     <div class="testimonial">Content</div> 
     <div class="testimonial">Content</div> 

     </div> 
    </div> 
    </div>  

<div class="testimonial">Content</div> 
<div class="curriculum>Content</div> 
<div class="curriculum">Content</div> 

スタイリングの理由から、<div>タグを含む3と<h2>（および関連する終了タグ）を追加する必要があることに注意してください。

.first().beforeと.last().afterを使用して最初のおよび最後の功績を単純に取得して、HTMLを追加することを望んでいましたが、JQueryが終了タグを追加しました。私はまた、JQueryの様々なを使用してみた.wrapAll、.before、.append私は理解していない理由のために運がなかった！誰もが、これは可能性がどのように何かアドバイスを持っていますstackoverflowの上

他のソリューションはすべて、単一<div>で要素のグループをラップに対処するように見えるが、他の<div> Sを追加しようとしたとき、私は問題があると<h2>

実現しましたか？私は単純に一度にあなたのラッパーのHTML構造を作成します

Answer 1

これはおそらく、あなたがメソッドをラップ使用しようとしていない場合は簡単です...、

var $wrapper = $('<div><div><h2>Testimonials</h2><div></div></div></div>'); 

とすることを挿入する前に、最初.testimonial要素：

$wrapper.insertBefore('.testimonial:first'); 

そして、単純にすべての.testimonialの要素をつかむと、目の奥div要素にそれらを追加先ほど作成した電子新しい構造...

$wrapper.find('div div').append($('.testimonial')); 

この例では、結果のDOMをチェックし、それはあなたが望むものでなければなりません：

Answer 2

https://jsfiddle.net/rjh4ybxr/1/私はdivからidを定義し、それが後で簡単に見つかりますので、 。このことができます

ホープ：

$(document).ready(function() { 

    $(".testimonial").wrapAll("<div id='testimonial'></div>"); 

    $("<h2>Testimonial</h2>").insertBefore("#testimonial"); 

}); 

body{ 
    background: gainsboro; 
} 
#testimonial{ 
    background:white; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<div class="curriculum">Content</div> 
<div class="curriculum">Content</div> 
<div class="testimonial">Content</div> 
<div class="testimonial">Content</div> 
<div class="testimonial">Content</div> 
<div class="curriculum">Content</div> 
<div class="curriculum">Content</div> 

Answer 3

私は、グループ化に必要な推薦状の複数のケースがあった場合のために、この思い付きました。

//find testimonials that are preceeded by a curriculum 
 
$('.curriculum + .testimonial').each(function(){ 
 
    var $firstTestimonial = $(this); 
 
    //get the first testimonial and all the immediately following testimonials 
 
    var $group = $firstTestimonial.add($firstTestimonial.nextUntil(':not(.testimonial)')); 
 
    //create a replacement with a id for the target of where the group should go 
 
    var $replacement = $('<div><div><h2>Testimonials</h2><div id="tempTarget"></div></div></div>'); 
 
    
 
    //put the replacement where the first testimonial was 
 
    $firstTestimonial.replaceWith($replacement); 
 
    //put all the testimonials in the group in the replacement, and then get rid of the temporary id 
 
    $replacement.find('#tempTarget').append($group).removeAttr('id'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="testimonial">Content</div> 
 
<div class="curriculum">Content</div> 
 
<div class="curriculum">Content</div>