JQuery .wrapall() ändert die Position der Elemente

Question

Ich benutze Wordpress und Woocommerce. Ich habe Produkttitel (H2) und Produktbild. Ich möchte sie mit einem div umhüllen. Aber alles funktioniert fast perfekt: In der Ausgabe I

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>

haben Aber was ich brauche, ist:

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>

Ich brauche den Titel an der Spitze, und dann das Bild. Ich habe versucht mit CSS, JS, aber nichts funktioniert. Können Sie mir bitte helfen?

Answer 1

Ich werde Sie mit

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

und Sie beginnen zu übernehmen, um am Ende mit

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

Wenn ja, nachdem sie wickeln wir nur die h2 nach oben bewegen der Verpackung:

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>