jQuery包装除一项以外的所有项目

Question

我正在尝试将所有内容包装在.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>

Answer 1

使用: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> 

Answer 2

: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" />');
})