Question

我有wordpress生成的以下代码，所以我不能轻易改变它;

<li class="post-1685">
   <a href="/product/goose/">
      <img width="150" height="150" src="/wp-content/uploads/2014/12/cuit1-150x150.jpeg" class="attachment-shop_catalog wp-post-image"  />
      <h3>Goose joint for roasting</h3>
      <span class="price"><span class="amount">&pound;90.00</span></span>
   </a>
</li>

我想在图像上方重新定位H3元素。我可以用一些简单的CSS来做到这一点;

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
padding: 0 .2em !important;
position: relative !important;
top: -255px !important;
}

但由于我不知道H3元素会有多少行，所以我不知道有多少行可以制作顶级px＆＃39>

我想在Jquery中这样做，所以我有H3，然后是没有h3重叠img的Img。

此致皮特

Answer 1

使用此

将h3添加到你的li的锚标签中，并带有-1685类

 $(".post-1685 a").prepend($(".post-1685 a h3"));

<强>演示

＆＃13;

$(".post-1685 a").prepend($(".post-1685 a h3"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="post-1685">
   <a href="/product/goose/">
      <img width="150" height="150" src="/wp-content/uploads/2014/12/cuit1-150x150.jpeg" class="attachment-shop_catalog wp-post-image"  />
      <h3>Goose joint for roasting</h3>
      <span class="price"><span class="amount">&pound;90.00</span></span>
   </a>
</li>

＆＃13;

定位链接的元素

1 个答案: