Как обернуть все элементы внутри div после определенного элемента? (На jQuery)

у меня есть тег article элементов внутри него.

: как я могу обернуть все элементы внутри 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>

6
css html javascript jquery

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