I'm using JQuery to select some elements on a page and then move them around in the DOM. The problem I'm having is I need to select all the elements in the reverse order that JQuery naturally wants to select them. For example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I want to select all the li items and use the .each() command on them but I want to start with Item 5, then Item 4 etc. Is this possible?
$($("li").get().reverse()).each(function() { /* ... */ });
I present you with the cleanest way ever, in the form of the world's smallest jquery plugin:
jQuery.fn.reverse = [].reverse;
Usage:
$('jquery-selectors-go-here').reverse().each(function () {
//business as usual goes here
});
-All credit to Michael Geary in his post here: http://www.mail-archive.com/[email protected]/msg04261.html
You can do
jQuery.fn.reverse = function() {
return this.pushStack(this.get().reverse(), arguments);
};
followed by
$(selector).reverse().each(...)
Here are different options for this:
First: without jQuery:
var lis = document.querySelectorAll('ul > li');
var contents = [].map.call(lis, function (li) {
return li.innerHTML;
}).reverse().forEach(function (content, i) {
lis[i].innerHTML = content;
});
... and with jQuery:
You can use this:
$($("ul > li").get().reverse()).each(function (i) {
$(this).text( 'Item ' + (++i));
});
Demo here
Another way, using also jQuery with reverse is:
$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
$(this).text( 'Item ' + (++i));
});
This demo here.
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 $li = $("ul > li");
$li.each(function (i) {
$(this).text( 'Item ' + ($li.length - i));
});
This demo here
One more, kind of related to the one above:
var $li = $("ul > li");
$li.text(function (i) {
return 'Item ' + ($li.length - i);
});
Demo here
I prefer creating a reverse plug-in eg
jQuery.fn.reverse = function(fn) {
var i = this.length;
while(i--) {
fn.call(this[i], i, this[i])
}
};
Usage eg:
$('#product-panel > div').reverse(function(i, e) {
alert(i);
alert(e);
});
If you don't want to save method into jQuery.fn you can use
[].reverse.call($('li'));
Needed to do a reverse on $.each so i used Vinay idea:
//jQuery.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});
worked nicely, thanks
You cannot iterate backwards with the jQuery each function, but you can still leverage jQuery syntax.
Try the following:
//get an array of the matching DOM elements
var liItems = $("ul#myUL li").get();
//iterate through this array in reverse order
for(var i = liItems.length - 1; i >= 0; --i)
{
//do Something
}
I found Array.prototype.reverse
unsuccessful with objects, so I made a new jQuery function to use as an alternative: jQuery.eachBack()
. It iterates through as the normal jQuery.each()
would, and stores each key into an array. It then reverses that array and performs the callback on the original array/object in the order of the reversed keys.
jQuery.eachBack=function (obj, callback) {
var revKeys=[]; $.each(obj,function(rind,rval){revKeys.push(rind);});
revKeys.reverse();
$.each(revKeys,function (kind,i){
if(callback.call(obj[i], i, obj[i]) === false) { return false;}
});
return obj;
}
jQuery.fn.eachBack=function (callback,args) {
return jQuery.eachBack(this, callback, args);
}
I recognize that jQuery supports and encourages plugins. That said, you may find this article relevant: Don’t modify objects you don’t own. In this case at least, I opted not to extend jQuery on the off chance that another plugin defines reverse differently.
Here's a simple solution that doesn't extend the jQuery object.
function jqueryReverse( set ) {
return [].reverse.call( set );
}
console.log( jqueryReverse( $( 'li' ) ) );
I think u need
.parentsUntill()
You can also try
var arr = [].reverse.call($('li'))
arr.each(function(){ ... })
©2020 All rights reserved.