如何在某個元素之後包裝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>