web-dev-qa-db-fra.com

JQuery .each () à l'envers

J'utilise JQuery pour sélectionner des éléments sur une page, puis les déplacer dans le DOM. Le problème que j'ai, c'est que je dois sélectionner tous les éléments dans l'ordre inverse de la sélection naturelle de JQuery. Par exemple:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

Je veux sélectionner tous les éléments li et utiliser la commande .each () sur eux, mais je veux commencer par l'élément 5, puis l'élément 4, etc. Est-ce possible?

javascriptjqueryarraysreverse
426
Jack Mills
$($("li").get().reverse()).each(function() { /* ... */ });
656
Joe Chung

Je vous présente de la manière la plus propre qui soit, sous la forme du plus petit plugin jquery au monde:

jQuery.fn.reverse = [].reverse;

Usage:

$('jquery-selectors-go-here').reverse().each(function () {
    //business as usual goes here
});

-Tout mérite à Michael Geary dans son post ici: http://www.mail-archive.com/[email protected]/msg04261.html

396
Waldo Hampton

Tu peux faire

jQuery.fn.reverse = function() {
    return this.pushStack(this.get().reverse(), arguments);
};

suivi par

$(selector).reverse().each(...)
62
Vinay Sajip

Voici différentes options pour cela:

Premier : sans 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;
});

Démo ici

... et avec jQuery:

Vous pouvez utiliser ceci:

$($("ul > li").get().reverse()).each(function (i) {
    $(this).text( 'Item ' + (++i));
});

Démo ici

Une autre manière , utilisant également jQuery avec reverse = est:

$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
    $(this).text( 'Item ' + (++i));
});

Cette démo ici .

Une autre option consiste à utiliser le length (nombre d'éléments correspondant à ce sélecteur) et à descendre à partir de là en utilisant le index de chaque itération. Ensuite, vous pouvez utiliser ceci:

var $li = $("ul > li");
$li.each(function (i) {
    $(this).text( 'Item ' + ($li.length - i));
});

Cette démo ici

Encore une , en quelque sorte liée à celle ci-dessus:

var $li = $("ul > li");
$li.text(function (i) {
    return 'Item ' + ($li.length - i);
});

Démo ici

19
Sergio

Je préfère créer un plug-in inverse, par exemple

jQuery.fn.reverse = function(fn) {       
   var i = this.length;

   while(i--) {
       fn.call(this[i], i, this[i])
   }
};

Utilisation par exemple:

$('#product-panel > div').reverse(function(i, e) {
    alert(i);
    alert(e);
});
14
James Westgate

Si vous ne voulez pas enregistrer la méthode dans jQuery.fn, vous pouvez utiliser

[].reverse.call($('li'));
8
yurakis

J'avais besoin d'inverser l'idée de Vinay:

//jQuery.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});

a bien fonctionné, merci

5
finklez

Vous ne pouvez pas effectuer une itération en arrière avec chaque fonction jQuery, mais vous pouvez toujours utiliser la syntaxe jQuery.

Essayez ce qui suit:

//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
}
3
David Andres

J'ai trouvé Array.prototype.reverse sans succès avec les objets. J'ai donc créé une nouvelle fonction jQuery à utiliser comme alternative: jQuery.eachBack(). Il effectue une itération comme le ferait la jQuery.each() normale et stocke chaque clé dans un tableau. Il inverse ensuite ce tableau et effectue le rappel sur le tableau/objet d'origine dans l'ordre des clés inversées.

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);
}
2
NRTRX

Je reconnais que jQuery supporte et encourage les plugins. Ceci dit, vous pouvez trouver cet article pertinent: Ne modifiez pas les objets que vous ne possédez pas . Dans ce cas au moins, j'ai choisi de ne pas étendre jQuery sans la moindre chance qu'un autre plug-in définisse l'inverse différemment.

Voici une solution simple qui n’étend pas l’objet jQuery.

function jqueryReverse( set ) {

    return [].reverse.call( set );
}

console.log( jqueryReverse( $( 'li' ) ) );
0
Lachmanski