CODEWITHSUNDEEP
javascriptjquery
Pete Harrison
Pete Harrison

Reputation: 95

Position elements of a link

I have the following code generated by wordpress so I cannot easily change it;

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

I want to reposition the H3 element above the image. I can do it with some simple css as follows;

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

but as I don't know how many lines the H3 element will be I don't know how big to make the Top px's

I want to do it in Jquery so I have the H3, followed by the Img without the h3 overlapping the img.

Regards Pete

Upvotes: 0

Views: 37

Answers (1)

A.B
A.B

Reputation: 20445

use this

Prepend h3 to anchor tag of your li withpost-1685 class 

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

Demo

$(".post-1685 a").prepend($(".post-1685 a h3"));
<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>

Upvotes: 1

Related Questions