WrapAll()在具有多个外观的多个类上 [英] WrapAll() on multiple classes with multiple appearance

问题描述

让我们说这是我的HTML

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>

现在我想将.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>

如果我只有一个列表项，则此代码可以解决问题

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

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

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

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

有人知道我该怎么做或怎么用each()做吗?

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

推荐答案

使用 each() 方法，并使用 add() 方法与下一个直接元素组合.

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>

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

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>

这篇关于WrapAll()在具有多个外观的多个类上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！