JQuery .wrapall（）更改元素位置

Question

我正在使用Wordpress和Woocommerce。 我有產品標題（H2）和產品圖片。我想用div來包裝它們。 但一切工作幾乎是完美的： 在輸出我有

jQuery(this).find('h2.woocommerce-loop-product__title,img.wp-post-image').wrapAll('<div class="prod-img-wrap col-md-3"> </div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="prod-img-wrap col-md-3"> 
 
<img class="wp-post-image" width="100px" height="100px" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg"> </img> 
 
<h2 class="woocommerce-loop-product__title">Title</h2> 
 

 
</div>

但我需要的是：

jQuery(this).find('h2.woocommerce-loop-product__title,img.wp-post-image').wrapAll('<div class="prod-img-wrap col-md-3"> </div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="prod-img-wrap col-md-3"> 
 
<h2 class="woocommerce-loop-product__title">Title</h2> 
 
<img class="wp-post-image" width="100px" height="100px" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg"> </img> 
 

 

 
</div>

我需要在頂部的標題，並然後是圖像。 我試着用CSS，JS，但沒有任何作品。 你能幫我嗎？

Answer 1

我會假設你開始了與

<img class="wp-post-image" width="100px" height="100px" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg"> </img> 
<h2 class="woocommerce-loop-product__title">Title</h2> 

，你想用

<div class="prod-img-wrap col-md-3"> 
    <h2 class="woocommerce-loop-product__title">Title</h2> 
    <img class="wp-post-image" width="100px" height="100px" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg"> 
</div> 

落得如果是這樣，他們包裹後，我們只需移動h2頂端

jQuery('h2.woocommerce-loop-product__title,img.wp-post-image').wrapAll('<div class="prod-img-wrap col-md-3"> </div>'); 
 
jQuery(".prod-img-wrap h2").each(function() { 
 
    $(this).prependTo(this.parentNode); 
 
    });

<img class="wp-post-image" width="100px" height="100px" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg"> </img> 
 
<h2 class="woocommerce-loop-product__title">Title</h2> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

：包裝紙