WrapAll() auf mehrere Klassen mit mehreren Aussehen

Question

Können sagen, das ist mein 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>

Jetzt habe ich .product-thumbnail und .product-price in

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

Like this

wickeln wollen

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

Dieser Code funktioniert der Trick, wenn ich nur ein Listenelement hatte

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

Ich habe versucht, eine each() auf .product-thubnail und .product-price aber ohne Erfolg ..

Hat jemand wissen, wie ich das machen könnte oder wie es mit each() gemacht werden könnte?

Answer 1

Iterieren über die .product-title mit each() Methode und kombinieren mit dem nächsten Element sofort mit add() Methode.

$('.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>

---

Oder iterieren die li und beide Klassen innerhalb des Elements erhalten, indem den Kontext bereitstellt.

$('.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>