JQuery .each () geriye doğru

Bir sayfadaki bazı öğeleri seçmek ve daha sonra DOM onları taşımak için JQuery kullanıyorum. Yaşadığım sorun, JQuery'nin doğal olarak onları seçmek istediği tüm öğeleri ters sırayla seçmem gerekiyor. Örneğin:

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

Tüm li öğelerini seçmek ve üzerlerinde .each () komutunu kullanmak istiyorum ancak önce Öğe 5, sonra Öğe 4 vb. İle başlamak istiyorum. Bu mümkün mü?

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

Size dünyanın en küçük jquery eklentisi şeklinde şimdiye kadarki en temiz yolu sunuyoruz:

jQuery.fn.reverse = [].reverse;

Kullanımı:

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

- Michael Geary'a buradaki gönderisindeki tüm kredi: http://www.mail-archive.com/discuss@jquery.com/msg04261.html

Yapabilirsin

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

bunu takiben

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

İşte bunun için farklı seçenekler:

İlk : jQuery olmadan:

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

Burada demo

... ve jQuery ile:

Bunu kullanabilirsiniz:

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

Burada demo

Başka bir yol da jQuery ile tersini kullanmaktır:

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

Bu demo burada .

Bir başka seçenek de length(bu seçiciyle eşleşen öğe sayısı) kullanmak ve indexher bir yinelemeyi kullanarak oradan aşağı inmektir. Sonra bunu kullanabilirsiniz:

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

Bu demo burada

Bir tane daha , yukarıdakiyle ilgili:

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

Burada demo

Ters bir eklenti oluşturmayı tercih ederim.

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

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

Kullanım ör:

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

Eğer yöntemi jQuery.fn içine kaydetmek istemiyorsanız kullanabilirsiniz

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

Vinay fikir kullanılan $ .each üzerinde bir ters yapmak gerekiyordu:

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

güzel çalıştı, teşekkürler

Her işlev jQuery ile geriye doğru yinelenemez, ancak yine de jQuery sözdiziminden yararlanabilirsiniz.

Takip etmeyi dene:

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

Bulduğum Array.prototype.reverseben alternatif olarak kullanmak için yeni bir jQuery işlevini yapılmış, böylece nesneler ile başarısız: jQuery.eachBack(). Normalde olduğu gibi yinelenir jQuery.each()ve her anahtarı bir dizide saklar. Daha sonra bu diziyi tersine çevirir ve orijinal dizi / nesne üzerinde geri arama tuşlarını sırasıyla geri çağırır.

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

Bence ihtiyacın var

.parentsUntill()

Ayrıca deneyebilirsiniz

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