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

Question

我有一个文章标签，里面有元素。

问题：如何在某个元素之后将div中的所有元素包装好？

这是当前的代码：

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

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

正如您所看到的......最终输出在class="description-wrap"

之后将所有元素包含在<figure></figure>内

Answer 1

正如@squint建议的那样，jQuery有一个wrapAll方法，如果与next-siblings-selector ~

结合使用可以做到这一点

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

但是，当您有多篇文章时，这并不能提供所需的输出。相反，我们需要像这样使用.each()：

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