Question 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 est que je dois sélectionner tous les éléments dans l'ordre inverse que JQuery veut naturellement les sélectionner. 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 (), mais je veux commencer avec l'élément 5, puis l'élément 4, etc. Est-ce possible?


412
2017-09-08 13:24


origine


Réponses:


$($("li").get().reverse()).each(function() { /* ... */ });

622
2017-09-08 13:31



Je vous présente la manière la plus propre, 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 crédit à Michael Geary dans son post ici: http://www.mail-archive.com/discuss@jquery.com/msg04261.html


387
2018-03-22 02:42



Tu peux faire

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

suivi par

$(selector).reverse().each(...) 

59
2017-09-08 13:34



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

Un autre manière, en utilisant aussi jQuery avec sens inverse est:

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

Cette démo ici.

Un de plus alternative est d'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

Un de plus, en quelque sorte lié à celui ci-dessus:

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

Démo ici


17
2017-08-19 18:22



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

13
2017-12-21 14:03



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

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

5
2018-03-31 08:09



Nécessaire de faire un retour sur $ .each donc j'ai utilisé l'idée de Vinay:

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

bien travaillé, merci


4
2018-06-17 04:00



Vous ne pouvez pas effectuer une itération en arrière avec chaque fonction jQuery, mais vous pouvez toujours tirer parti de 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
}

2
2017-09-08 13:30