Swolschblauw Swolschblauw - 11 days ago 6
HTML Question

WrapAll() on multiple classes with multiple appearance

Lets say this is my HTML



<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
</ul>





Now I want to wrap
.product-thumbnail
and
.product-price
in

<div class="left"></div>


Like this



<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>

<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
</ul>





This code does the trick if I had only one list item

$(".product-thumbnail, .product-price").wrapAll("<div class='left'></div>");


I've tried an
each()
on
.product-thubnail
and
.product-price
but without results..

Does anyone know how I could do this or how it could be done with
each()
?

Answer

Iterate over the .product-title using each() method and combine with the immediate next element using add() method.

$('.product-title').each(function() {
  $(this).add($(this).next()).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
  <li class="product">
    <div class="product-title"></div>
    <div class="product-thumbnail"></div>
    <div class="product-price"></div>
    <div class="product-discription"></div>
  </li>
  <li class="product">
    <div class="product-title"></div>
    <div class="product-thumbnail"></div>
    <div class="product-price"></div>
    <div class="product-discription"></div>
  </li>
</ul>


Or iterate over the li and get both classes within the element by providing the context.

$('.product').each(function() {
  $('.product-title,.product-thumbnail', this).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
  <li class="product">
    <div class="product-title"></div>
    <div class="product-thumbnail"></div>
    <div class="product-price"></div>
    <div class="product-discription"></div>
  </li>
  <li class="product">
    <div class="product-title"></div>
    <div class="product-thumbnail"></div>
    <div class="product-price"></div>
    <div class="product-discription"></div>
  </li>
</ul>

Comments