JQuery .each () mundur

Saya menggunakan JQuery untuk memilih beberapa elemen pada halaman dan kemudian memindahkannya di DOM. Masalah yang saya alami adalah saya harus memilih semua elemen dalam urutan terbalik yang secara alami ingin dipilih oleh JQuery. Sebagai contoh:

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

Saya ingin memilih semua item li dan menggunakan perintah .each () pada mereka tetapi saya ingin memulai dengan Item 5, lalu Item 4 dll. Apakah ini mungkin?

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

Saya hadir dengan cara terbersih yang pernah ada, dalam bentuk plugin jquery terkecil di dunia:

jQuery.fn.reverse = [].reverse;

Pemakaian:

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

-Semua kredit untuk Michael Geary dalam posnya di sini: http://www.mail-archive.com/[email protected]/msg04261.html

Anda dapat melakukan

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

diikuti oleh

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

Berikut beberapa opsi untuk ini:

Pertama : tanpa 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 di sini

... dan dengan jQuery:

Anda bisa menggunakan ini:

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

Demo di sini

Cara lain , menggunakan jQuery juga dengan terbalik adalah:

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

Demo ini di sini .

Satu lagi alternatif adalah dengan menggunakan length(jumlah elemen yang cocok dengan pemilih itu) dan turun dari sana menggunakan indexsetiap iterasi. Maka Anda dapat menggunakan ini:

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

Demo ini di sini

Satu lagi , jenis yang terkait dengan yang di atas:

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

Demo di sini

Saya lebih suka membuat reverse plug-in misalnya

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

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

Penggunaan misalnya:

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

Jika Anda tidak ingin menyimpan metode ke jQuery.fn, Anda dapat menggunakannya

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

Diperlukan untuk melakukan pembalikan pada $ .each jadi saya menggunakan ide Vinay:

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

bekerja dengan baik, terima kasih

Anda tidak dapat mengulangi mundur dengan fungsi masing-masing jQuery, tetapi Anda masih dapat memanfaatkan sintaks jQuery.

Coba yang berikut ini:

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

Saya menemukan Array.prototype.reversetidak berhasil dengan benda-benda, jadi saya membuat fungsi jQuery baru untuk digunakan sebagai alternatif: jQuery.eachBack(). Itu berulang seperti biasa jQuery.each(), dan menyimpan setiap kunci ke dalam array. Ini kemudian membalikkan array itu dan melakukan panggilan balik pada array / objek asli dalam urutan kunci terbalik.

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

Saya pikir kamu perlu

.parentsUntill()

Anda juga bisa mencoba

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