如何在某个元素之后将div中的所有元素包装起来？ （JQuery的）

Question

I have an article tag that has elements inside it.

Problem: How can I wrap all elements inside a div after a certain element?

This is the current 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>

The output must be:

<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>

As you can see.. the final output has all the elements wrapped inside class="description-wrap" after <figure></figure>

Answer 1

As @squint suggested, jQuery has a wrapAll method that can do that if combined with the next-siblings-selector ~

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

however, this doesn't give you the desired output when you have multiple articles. Instead we need to use .each() like so:

 $("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>