CODEWITHSUNDEEP
javascriptjqueryhtml
beliy333
beliy333

Reputation: 479

How to wrap all elements in each container

I need to wrapAll divs that are children of li except the div with class A. Also need to keep them in their parent li's.

Current html:

<ul class="container">
 <li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
 </li>

 <li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
 </li>
</ul>

Desired output:

<ul class="container">
 <li>
  <div class="a"></div>
   <div class="wrapped">
    <div class="b"></div>
    <div class="c"></div>
   </div>
 </li>

 <li>
   <div class="a"></div>
     <div class="wrapped">
       <div class="b"></div>
       <div class="c"></div>
     </div>
 </li>
</ul>

Thought this code would do it but it's not working. I would like to use a variable to define the selected divs:

var selected = $("li").children().not(".a");
$(selected).each(function() {
    $(selected).wrapAll($("<div class='wrapped'></div>"));
});

Upvotes: 2

Views: 457

Answers (1)

Tushar
Tushar

Reputation: 87203

Iterate over each li and then wrap it's children which don't have class a. wrapAll will wrap all possible matched elements, so it'll also wrap the matched elements from other li.

$('li').each(function() {
  $(this).children().not('.a').wrapAll('<div class="wrapped"></div>');
});
.wrapped {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
  <li>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="b">B</div>
  </li>

  <li>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="b">B</div>
  </li>
</ul>

Upvotes: 1

Related Questions