WrapAll() 在多个类上具有多个外观

Question

假设这是我的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>

现在我想将 .product-thumbnail 和 .product-price 包装在

中

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

像这样

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

如果我只有一个列表项，这段代码就可以解决问题

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

我已经在 .product-thubnail 和 .product-price 上尝试了 each() 但没有结果..

有谁知道我如何做到这一点或如何用 each() 做到这一点？

Answer 1

使用 each() method and combine with the immediate next element using add() 方法迭代 .product-title。

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

或者遍历 li 并通过提供上下文在元素中获取两个类。

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

WrapAll() 在多个类上具有多个外观

WrapAll() on multiple classes with multiple appearance

html

javascript

jquery

wrapall

WrapAll() 在多个 类 上具有多个外观

WrapAll() on multiple classes with multiple appearance

html

javascript

jquery

wrapall

WrapAll() 在多个类上具有多个外观