Search jQuery

jQuery Forum

Changing the order of images in html

in Using jQuery • 10 years ago

Yo!

Would you be able to tell me the best way to get the following images to change the order in which they are positioned in html?

<div class="main">
 <a class="product" href="#"><img class="hider" alt="" title="" src="img2.jpg"></a>
 <a class="product" href="#"><img class="hider" alt="" title="" src="img3.jpg"></a>
 <a class="product" href="#"><img class="displayer" alt="" title="" src="img1.jpg"></a>
</div>

I want to get img1.jpg with the class displayer to be before the images with class hider so that they appear in the correct order. any idea how I can do that with CSS? I've seen something about using display:block etc but I couldn't get it working. Or is this kind of thing better to do with JQuery?

Thank you

Replies(4)

Godsbest

Re: Changing the order of images in html

10 years ago

$(function() {
$('div.main a.product').last().clone().prependTo('div.main').end().end().remove();
});

kyazdani

Re: Changing the order of images in html

10 years ago

Thanks for your reply. That's really cool.

However, the problem I've got is that the image with class = "displayer" isn't always the last one in the html. How would you amend this example so that it displays the "displayer" first and the "hider" (doesnt matter the order of the hider) after it?

I've added your code to JSFiddle to make it easy for you to quickly amend if you are ok to help me?

Many thanks

http://jsfiddle.net/k7FhR/

Godsbest