JQuery .cada uno() al revés

Resuelto Jack Mills asked hace 15 años • 12 respuestas

Estoy usando JQuery para seleccionar algunos elementos en una página y luego moverlos en el DOM. El problema que tengo es que necesito seleccionar todos los elementos en el orden inverso al que JQuery naturalmente quiere seleccionarlos. Por ejemplo:

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

Quiero seleccionar todos los elementos li y usar el comando .each() en ellos, pero quiero comenzar con el elemento 5, luego el elemento 4, etc. ¿Es esto posible?

Jack Mills avatar Sep 08 '09 20:09 Jack Mills
Aceptado
$($("li").get().reverse()).each(function() { /* ... */ });
Joe Chung avatar Sep 08 '2009 13:09 Joe Chung

Les presento la forma más limpia jamás creada, en forma del complemento jquery más pequeño del mundo:

jQuery.fn.reverse = [].reverse;

Uso:

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

-Todo el crédito a Michael Geary en su publicación aquí: http://www.mail-archive.com/[email protected] /msg04261.html

Waldo Hampton avatar Mar 22 '2011 02:03 Waldo Hampton

Aquí hay diferentes opciones para esto:

Primero : sin 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;
});

Demostración aquí

... y con jQuery:

Puedes usar esto:

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

Demostración aquí

Otra forma, usando también jQuery con reverso es:

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

Esta demostración aquí .

Una alternativa más es usar length(recuento de elementos que coinciden con ese selector) y bajar desde allí usando el indexde cada iteración. Entonces puedes usar esto:

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

Esta demostración aquí

Uno más , algo relacionado con el anterior:

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

Demostración aquí

Sergio avatar Aug 19 '2013 18:08 Sergio

Prefiero crear un complemento inverso, por ejemplo

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

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

Uso por ejemplo:

$('#product-panel > div').reverse(function(i, e) {
    alert(i);
    alert(e);
});
James Westgate avatar Dec 21 '2010 14:12 James Westgate

Si no desea guardar el método en jQuery.fn, puede utilizar

[].reverse.call($('li'));
yurakis avatar Mar 31 '2017 08:03 yurakis