javascript - for - jquery each break

JQuery.each() al revés

Question

Estoy usando JQuery para seleccionar algunos elementos en una página y luego moverlos en el DOM. El problema que tengo es que debo 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?

Answer 1

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

Demo here

... y con jQuery:

Puedes usar esto:

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

Demo here

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

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

Esta demo here .

Una alternativa más es usar la length (cuenta 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 demo here

Una más , más o menos relacionada con la anterior:

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

Demo here

Answer 2

Creo que necesitas

.parentsUntill()

Answer 3

Encontré Array.prototype.reverse sin éxito con los objetos, así que hice una nueva función jQuery para usar como alternativa: jQuery.eachBack() . Se itera como lo jQuery.each() el jQuery.each() normal, y almacena cada clave en una matriz. Luego invierte esa matriz y realiza la devolución de llamada en la matriz / objeto original en el orden de las claves invertidas.

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

Answer 4

Le presento la forma más limpia que haya existido, en la forma del plugin 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 crédito a Michael Geary en su publicación aquí: http://www.mail-archive.com/[email protected]/msg04261.html

Answer 5

Necesitaba hacer un reverso en $. Cada vez que usé la idea de Vinay:

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

funcionó muy bien, gracias

Answer 6

No puede repetir hacia atrás con jQuery cada función, pero aún puede aprovechar la sintaxis de jQuery.

Intenta lo siguiente:

//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
}

Answer 7

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

Answer 8

Reconozco que jQuery apoya y alienta a los complementos. Dicho esto, puede que este artículo sea relevante: no modifique los objetos que no posee . Al menos en este caso, opté por no extender jQuery en la posibilidad de que otro complemento defina reversa de manera diferente.

Aquí hay una solución simple que no extiende el objeto jQuery.

function jqueryReverse( set ) {
return [].reverse.call( set );
}
console.log( jqueryReverse( $( ''li'' ) ) );

Answer 9

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

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

Answer 10

También puedes probar

var arr = [].reverse.call($(''li''))
arr.each(function(){ ... })

Answer 11

Tu puedes hacer

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

seguido por

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

Answer 12

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