Reverse $.each output in jQuery

Question

I'm making a little secret tool. The output will be in a table, and on the left-hand side I'd like to list the numbers I have stored in $.each(). So here's my code:

$.each([1,2,3,4,5], function(i, l){


   var lol = (some math stuff here);

   $("#output").append("<tr><td>" + l + "</td><td>" + lol + "</td><tr>");

});

What this does is output the following:

1.  lol1
2.  lol2
3.  lol3
4.  lol4
5.  lol5

What I'm trying to do is reverse that l value but leave everything else alone so that the output instead looks like this:

5. lol1
4. lol2
3. lol3
2. lol4
1. lol5

maxedison · Accepted Answer · 2011-12-16 15:39:23Z

9

Create a copy of the array and then reverse that one. Here's a working example: http://jsfiddle.net/naRKF/

And the code (the HTML isn't the same as yours, but the JS technique is what you should focus on/use):

var arr1 = [1,2,3,4,5];
var arr2 = arr1.slice().reverse(); //creates a copy and reverses it

var html = '';
for(var i = 0; i < arr1.length; i++){
    html += '<div>' + arr2[i] + '.' + ' lol' + arr1[i] + '</div>';
}

$('body').append(html);

answered Dec 16, 2011 at 15:39

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ggwicz Over a year ago

DUDE. This works perfectly. I really appreciate it. I tried doing the whole for(i = 0...) stuff before and couldn't get it to work. Thanks so much!

maxedison Over a year ago

For what it's worth, a standard for loop is probably quicker than jQuery's $.each() loop. $.each() really exists so that you can easily iterate over the properties of an object, as opposed to the items in an array. And one other thing: be aware that arr2 = arr1 does NOT create a copy of the array. It simply creates two separate variables that reference the same array. So if you were to do arr2 = arr1; arr2.reverse() -- you'd actually be reversing arr1 as well because they are the same. arr1.slice() is the trick that actually creates the copy.

Madara's Ghost · Accepted Answer · 2011-12-16 15:37:16Z

2

$.each() will always iterate the array in the correct order. You want to use a for loop for this one, rather then jQuery's $.each().

answered Dec 16, 2011 at 15:37

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

1 Comment

ggwicz Over a year ago

Thanks, I tried using for before and I couldn't get it just right. maxedison's answer solved this problem. Thanks for the contribution!

Bill Lynch · Accepted Answer · 2011-12-16 15:38:58Z

2

x = [1,2,3,4,5]
$.each(x.reverse(), function(i, l){
    var lol = (some math stuff here)
    $("#output").append("<tr><td>" + l + "</td><td>" + lol + "</td><tr>")
})

answered Dec 16, 2011 at 15:38

Bill Lynch

82.4k16 gold badges132 silver badges181 bronze badges

2 Comments

mrtsherman Over a year ago

This reverses the output, but does not invert the numbering like he wants. lol2 is with 2, but should be with 4. jsfiddle.net/EEuN8

ggwicz Over a year ago

Hmm. This didn't work, but storing the array as a separate variable is a good move and ended up working for me with maxedison's answer. Thanks for helping out!

user400654 · Accepted Answer · 2011-12-16 15:39:38Z

1

Try this:

$.each([1,2,3,4,5].reverse(),function(i,l){...

Basically since you are using a native array, you can simply reverse it to go in the opposite direction.

answered Dec 16, 2011 at 15:39

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-12-16 15:40:28Z

1

Here you go

var arr = [1,2,3,4,5];
var counter = arr.length
$.each(arr, function(i, l){

   var lol = "lol"+l;

   $("#output").append("<tr><td>" + counter-- + ".&nbsp;&nbsp;</td><td>" + lol + "</td><tr>");

});

Working demo

answered Dec 16, 2011 at 15:40

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

jabclab · Accepted Answer · 2011-12-16 15:46:25Z

0

Soemthing like this should help:

function test(arr) {
    if ($.isArray(arr)) {
        var reverse = arr.slice().reverse();
        $(arr).each(function(i) {
            console.log(reverse[i] + ". lol" + this);
        });
    }
}

test([1, 2, 3, 4, 5]);

answered Dec 16, 2011 at 15:46

jabclab

15.1k5 gold badges58 silver badges51 bronze badges

Comments

Jazz Man · Accepted Answer · 2011-12-16 15:48:42Z

0

var a=[1,2,3,4,5]
$.each(a, function(i, l){
   var lol = (some math stuff here);
   $("#output").append("<tr><td>" + a[a.length-i] + "</td><td>" + lol + "</td><tr>");
});

edited Dec 16, 2011 at 15:48

answered Dec 16, 2011 at 15:42

Jazz Man

9177 silver badges17 bronze badges

Collectives™ on Stack Overflow

Reverse $.each output in jQuery

7 Answers 7

2 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related