jquery: reverse an order

Question

How can I reverse an order with jquery?

I tried with the suggestion like this but it won't work!

$($(".block-item").get().reverse()).each(function() { /* ... */ });

Have a look here.

I want the boxed to be rearranged like this,

18
17
16
etc

Thanks.

Answer 1

If you have a container around the list, it's a little easier:

$("#container").append($(".block-item").get().reverse());

http://jsfiddle.net/BhTEN/12/

Answer 2

You can use this:

$($(".block-item").get().reverse()).each(function (i) {
    $(this).text(++i);
});

Demo here.
Second demo here (changing the DOM elements positioning).

Another way, using also jQuery with reverse is:

$.fn.reverse = [].reverse;
$(".block-item").reverse().each(function (i) {
    $(this).text(++i);
});

This demo here.
Second demo here (changing the DOM elements positioning).

One more alternative is to use the length (count of elements matching that selector) and go down from there using the index of each iteration. Then you can use this:

var nr_of_divs = $(".block-item").length;
$(".block-item").each(function (i) {
    $(this).text(nr_of_divs - i);
});

This demo here
Second demo here (changing the DOM elements positioning).

One more, kind of related to the one above:

var nr_of_divs = $(".block-item").length;
$(".block-item").text(function (i) {
    return nr_of_divs - i;
});

Demo here