如何在某个元素之后将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方法,如果与下一个兄弟选择器结合使用可以做到这一点 ~

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