Question

我正在使用Wordpress和Woocommerce。我有产品名称（H2）和产品图片。我想用div包装它们。但一切都近乎完美：在输出中我有

＆＃13;

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

＆＃13;

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

＆＃13;

但我需要的是：

＆＃13;

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

＆＃13;

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

＆＃13;

我需要顶部的标题，然后是图像。我尝试使用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>

JQuery .wrapall（）更改元素位置

1 个答案: