jQuery包装除了一个之外的每个项目

时间：2016-11-08 10:02:51

标签： javascript jquery

我试图将所有内容包装在.product.type-product div中，但不包括第一个div（包含图像）。我尝试过以下但没有工作！任何帮助和建议都会有所帮助。

JS

V1。 

$('.product.type-product').each(function() {
     $(this).children('div,h3,span,form').not(':first-child').wrapAll('<div class="new columns small-12 medium-12 large-6" />');
   }

V2。 

$('.product.type-product').children('div,h3,span,form').not(':first-child').wrapAll('<div class="new columns small-12 medium-12 large-6" />');

HTML 

<div class="post-886 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-simple">
  <div class="image columns small-12 medium-12 large-6">
    <img width="800" height="389" src="XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="EBWL008_Voucher_Bowl-FR" srcset="XXX.jpg 800w, XXX.jpg 1024w, XXX.jpg 1080w" sizes="(max-width: 800px) 100vw, 800px">
  </div>
  <!-- WRAP START -->
  <h3>1 Hour Family Bowling Session</h3>
  <div itemprop="description">
    <p>Reserve a lane for 60 minutes of family fun. Automatic bumper system. Bowling ramps available. Shoe hire included.</p>
    <ul>
      <li>Up to 6 people for 1 hour</li>
      <li>1 player must be a junior (under 16)</li>
    </ul>
    <p>Can be used any time Sun – Thurs or up to 6pm Fri – Sat</p>
    <p>To book please call us on 01422 301123</p>
  </div>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>25.00</span></span>
  <form action="/electric-bowl/wordpress/shop/?add-to-cart=886" class="cart" method="post" enctype="multipart/form-data">
    <div class="quantity">
      <input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
    </div>
    <button type="submit" class="button alt">Add to cart</button>
  </form>
  <!-- WRAP END -->
</div>
<div class="post-886 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-simple">
  <div class="image columns small-12 medium-12 large-6">
    <img width="800" height="389" src="XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="EBWL008_Voucher_Bowl-FR" srcset="XXX.jpg 800w, XXX.jpg 1024w, XXX.jpg 1080w" sizes="(max-width: 800px) 100vw, 800px">
  </div>
  <!-- WRAP START -->
  <h3>1 Hour Family Bowling Session</h3>
  <div itemprop="description">
    <p>Reserve a lane for 60 minutes of family fun. Automatic bumper system. Bowling ramps available. Shoe hire included.</p>
    <ul>
      <li>Up to 6 people for 1 hour</li>
      <li>1 player must be a junior (under 16)</li>
    </ul>
    <p>Can be used any time Sun – Thurs or up to 6pm Fri – Sat</p>
    <p>To book please call us on 01422 301123</p>
  </div>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>25.00</span></span>
  <form action="/electric-bowl/wordpress/shop/?add-to-cart=886" class="cart" method="post" enctype="multipart/form-data">
    <div class="quantity">
      <input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
    </div>
    <button type="submit" class="button alt">Add to cart</button>
  </form>
  <!-- WRAP END -->
</div>
<div class="post-886 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-simple">
  <div class="image columns small-12 medium-12 large-6">
    <img width="800" height="389" src="XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="EBWL008_Voucher_Bowl-FR" srcset="XXX.jpg 800w, XXX.jpg 1024w, XXX.jpg 1080w" sizes="(max-width: 800px) 100vw, 800px">
  </div>
  <!-- WRAP START -->
  <h3>1 Hour Family Bowling Session</h3>
  <div itemprop="description">
    <p>Reserve a lane for 60 minutes of family fun. Automatic bumper system. Bowling ramps available. Shoe hire included.</p>
    <ul>
      <li>Up to 6 people for 1 hour</li>
      <li>1 player must be a junior (under 16)</li>
    </ul>
    <p>Can be used any time Sun – Thurs or up to 6pm Fri – Sat</p>
    <p>To book please call us on 01422 301123</p>
  </div>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>25.00</span></span>
  <form action="/electric-bowl/wordpress/shop/?add-to-cart=886" class="cart" method="post" enctype="multipart/form-data">
    <div class="quantity">
      <input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
    </div>
    <button type="submit" class="button alt">Add to cart</button>
  </form>
  <!-- WRAP END -->
</div>

2 个答案:

答案 0 :(得分：0)

使用:first伪类选择器。

$('.product.type-product').each(function() {
  $(this).children('div,h3,span,form').not(':first').wrapAll('<div class="new columns small-12 medium-12 large-6" />');
})


$('.product.type-product').each(function() {
  $(this).children('div,h3,span,form').not(':first').wrapAll('<div class="new columns small-12 medium-12 large-6" />');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-886 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-simple">
  <div class="image columns small-12 medium-12 large-6">
    <img width="800" height="389" src="XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="EBWL008_Voucher_Bowl-FR" srcset="XXX.jpg 800w, XXX.jpg 1024w, XXX.jpg 1080w" sizes="(max-width: 800px) 100vw, 800px">
  </div>
  <!-- WRAP START -->
  <h3>1 Hour Family Bowling Session</h3>
  <div itemprop="description">
    <p>Reserve a lane for 60 minutes of family fun. Automatic bumper system. Bowling ramps available. Shoe hire included.</p>
    <ul>
      <li>Up to 6 people for 1 hour</li>
      <li>1 player must be a junior (under 16)</li>
    </ul>
    <p>Can be used any time Sun – Thurs or up to 6pm Fri – Sat</p>
    <p>To book please call us on 01422 301123</p>
  </div>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>25.00</span>
  </span>
  <form action="/electric-bowl/wordpress/shop/?add-to-cart=886" class="cart" method="post" enctype="multipart/form-data">
    <div class="quantity">
      <input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
    </div>
    <button type="submit" class="button alt">Add to cart</button>
  </form>
  <!-- WRAP END -->
</div>
<div class="post-886 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-simple">
  <div class="image columns small-12 medium-12 large-6">
    <img width="800" height="389" src="XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="EBWL008_Voucher_Bowl-FR" srcset="XXX.jpg 800w, XXX.jpg 1024w, XXX.jpg 1080w" sizes="(max-width: 800px) 100vw, 800px">
  </div>
  <!-- WRAP START -->
  <h3>1 Hour Family Bowling Session</h3>
  <div itemprop="description">
    <p>Reserve a lane for 60 minutes of family fun. Automatic bumper system. Bowling ramps available. Shoe hire included.</p>
    <ul>
      <li>Up to 6 people for 1 hour</li>
      <li>1 player must be a junior (under 16)</li>
    </ul>
    <p>Can be used any time Sun – Thurs or up to 6pm Fri – Sat</p>
    <p>To book please call us on 01422 301123</p>
  </div>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>25.00</span>
  </span>
  <form action="/electric-bowl/wordpress/shop/?add-to-cart=886" class="cart" method="post" enctype="multipart/form-data">
    <div class="quantity">
      <input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
    </div>
    <button type="submit" class="button alt">Add to cart</button>
  </form>
  <!-- WRAP END -->
</div>
<div class="post-886 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-simple">
  <div class="image columns small-12 medium-12 large-6">
    <img width="800" height="389" src="XXX.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="EBWL008_Voucher_Bowl-FR" srcset="XXX.jpg 800w, XXX.jpg 1024w, XXX.jpg 1080w" sizes="(max-width: 800px) 100vw, 800px">
  </div>
  <!-- WRAP START -->
  <h3>1 Hour Family Bowling Session</h3>
  <div itemprop="description">
    <p>Reserve a lane for 60 minutes of family fun. Automatic bumper system. Bowling ramps available. Shoe hire included.</p>
    <ul>
      <li>Up to 6 people for 1 hour</li>
      <li>1 player must be a junior (under 16)</li>
    </ul>
    <p>Can be used any time Sun – Thurs or up to 6pm Fri – Sat</p>
    <p>To book please call us on 01422 301123</p>
  </div>
  <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>25.00</span>
  </span>
  <form action="/electric-bowl/wordpress/shop/?add-to-cart=886" class="cart" method="post" enctype="multipart/form-data">
    <div class="quantity">
      <input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
    </div>
    <button type="submit" class="button alt">Add to cart</button>
  </form>
  <!-- WRAP END -->
</div>

答案 1 :(得分：0)

将:first与.not()

一起使用 
$('.product.type-product').each(function() {
  $(this).children('div,h3,span,form').not(':first').wrapAll('<div class="new columns small-12 medium-12 large-6" />');
})
相关问题
最新问题