Wie umschließt man alle Elemente innerhalb eines div nach einem bestimmten Element? (JQuery)

Question

Ich habe ein Artikel-Tag, das Elemente enthält.

Problem: Wie kann ich alle Elemente innerhalb eines Div nach einem bestimmten Element umhüllen?

Dies ist der aktuelle Code:

<article> 
    <figure class="thumbnail"> 
      <img src="src_to_img" /> 
    </figure> 

     <h2>Name: Test Name</h2> 
     <div class="description"></div> 
     <div class="content"></div> 
     <div class="content"></div> 
     <div class="more"></div> 
<article> 

Die Ausgang sein muss:

<article> 
    <figure class="thumbnail"> 
      <img src="src_to_img" /> 
    </figure> 

     <div class="description-wrap"> 
     <h2>Name: Test Name</h2> 
     <div class="description"></div> 
     <div class="content"></div> 
     <div class="content"></div> 
     <div class="more"></div> 
     </div> 
<article> 

Wie Sie die endgültige Ausgabe die Elemente alle in class="description-wrap" gewickelt hat sehen .. kann nach <figure></figure>

Answer 1

Wie @squint vorgeschlagen, hat jQuery eine wrapAll Methode, kann das tun, wenn sie mit dem ~

$("article > figure ~ *").wrapAll("<div class='description-wrap'></div>") 

jedoch next-siblings-selector kombiniert, ist dies nicht die gewünschte Ausgabe nicht geben, wenn Sie mehrere Artikel haben. Stattdessen müssen wir .each() wie so verwenden:.

$("article > figure").each(function(){ 
 
    $(this).siblings().wrapAll("<div class='description-wrap'></div>") 
 
});

.description-wrap {border:1px dotted red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<article> 
 
    <figure class="thumbnail"> 
 
      <img src="src_to_img" /> 
 
    </figure> 
 

 
     <h2>Name: Test Name</h2> 
 
     <div class="description"></div> 
 
     <div class="content"></div> 
 
     <div class="content"></div> 
 
     <div class="more"></div> 
 
</article> 
 
    
 
    <article> 
 
    <figure class="thumbnail"> 
 
      <img src="src_to_img" /> 
 
    </figure> 
 

 
     <h2>Name: Test Name</h2> 
 
     <div class="description"></div> 
 
     <div class="content"></div> 
 
     <div class="content"></div> 
 
     <div class="more"></div> 
 
</article>