JQuery .wrapall（）更改元素位置

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

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，但沒有任何作品。你能幫我嗎？

來源

2017-04-27 Yavor

感謝您的評論，它已被編輯。 – Yavor

這些片段非常混亂。再次（正如我刪除了我之前的評論）：我們需要在**你改變它之前看到它的結構。 –

我會假設你開始了與

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

：包裝紙

來源

2017-04-27 13:54:22

非常感謝！這正是我想要實現的！ – Yavor

JQuery .wrapall（）更改元素位置

回答

相關問題