javascript - How to wrap all elements inside a div after a certain element? (JQuery) - Stack Overflow

admin管理员组

文章数量:1397102

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 30, 2014 at 16:57 Paul Roub 36.5k2727 gold badges8686 silver badges9595 bronze badges asked Sep 30, 2014 at 16:53 RedshotRedshot 42711 gold badge55 silver badges77 bronze badges 2

• 5 $("figure ~ *").wrapAll("<div class='description-wrap'></div>") If there are multiple, then select each article and operate on each one. – user1106925 Commented Sep 30, 2014 at 16:58
• 1 agreed with @squint, nice solution – Vahe Shadunts Commented Sep 30, 2014 at 17:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

As @squint suggested, jQuery has a wrapAll method that can do that if bined 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./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>

本文标签： javascriptHow to wrap all elements inside a div after a certain element (JQuery)Stack Overflow