JQuery .cada uno() al revés
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?
$($("li").get().reverse()).each(function() { /* ... */ });
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
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 index
de 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í
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);
});
Si no desea guardar el método en jQuery.fn, puede utilizar
[].reverse.call($('li'));