Question

I am building a site for experiment and I am having trouble with some code.

The next button works but the previous button doesn’t. It basically swaps the first two divs with the class “tri” but not the other one.

I cannot understand why one works and the other one doesn’t.

I have tried prependTo and before but neither work properly?

Feel free to look at the code here:

HTML: http://epicgiggle.co.uk/test/-testtwo/index.html

CSS: http://epicgiggle.co.uk/test/-testtwo/style.css

jQuery: http://epicgiggle.co.uk/test/-testtwo/custom.js

Thanks in advance!

Answer 1

What a lot of work you’re doing, moving the text and CSS attributes individually. Far easier to move the divs themselves. (.insertBefore and .insertAfter are the methods you need in this particular case.)

$(".prev").click(function() {
        $('.tri').last().insertBefore( $('.tri').first() );
});
$(".next").click(function() {
        $('.tri').first().insertAfter( $('.tri').last() );
});

http://jsfiddle.net/mblase75/Dnwvy/2/