I have ajax call which gets results from database. But when I append div with html the order of content is reversed. How can I re-reverse it to set last item as a first. I don't want to order content in SQL. Is there a way to do this in jQuery?

$.each(data.idUser.matches, function(index, element) {
$('.myDiv').append('<div>...SOME LONG HTML CONTENT'</div')

I have ajax call which gets results from database. But when I append div with html the order of content is reversed. How can I re-reverse it to set last item as a first. I don't want to order content in SQL. Is there a way to do this in jQuery?

$.each(data.idUser.matches, function(index, element) {
$('.myDiv').append('<div>...SOME LONG HTML CONTENT'</div')

• javascript
• jquery
• html
• ajax

• data.idUser.matches.reverse(),.... – Mihai Commented Feb 17, 2017 at 17:34

3 Answers 3

You can use prepend instead of append to add at the top of a container rather than at the bottom of it.

Alternately, of course, just reverse the array before looping through it. Arrays have a built-in reverse method.

Or loop through it backward with a for loop.

You can use .prepend() here.

var data = [1, 2, 3, 4];

$.each(data, function(index, element) {
    $('.myDiv').prepend('<div>...SOME LONG HTML CONTENT - ' + index + '</div>');
});

Check out the fiddle to see it in action: https://jsfiddle/3xwmcnfu/

You can try using the Jquery.reverse() function, here's a fiddle with the example.

<ul class="ioi">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

var i = 0;

$($("li").get().reverse()).each(function() {
  $( this ).html(i);
  i++;
});

https://jsfiddle/86LLftwe