JQuery .each () ngược

Tôi đang sử dụng JQuery để chọn một số thành phần trên một trang và sau đó di chuyển chúng xung quanh trong DOM. Vấn đề tôi gặp phải là tôi cần chọn tất cả các phần tử theo thứ tự ngược lại mà JQuery muốn chọn chúng một cách tự nhiên. Ví dụ:

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

Tôi muốn chọn tất cả các mục li và sử dụng lệnh .each () trên chúng nhưng tôi muốn bắt đầu với Mục 5, sau đó Mục 4, v.v. Điều này có khả thi không?

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

Tôi giới thiệu với bạn cách thức sạch nhất từ ​​trước đến nay, dưới dạng plugin jquery nhỏ nhất thế giới:

jQuery.fn.reverse = [].reverse;

Sử dụng:

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

-Tất cả tín dụng cho Michael Geary trong bài đăng của mình ở đây: http://www.mail-archive.com/discuss@jquery.com/msg04261.html

Bạn có thể làm

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

theo dõi bởi

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

Dưới đây là các tùy chọn khác nhau cho việc này:

Đầu tiên : không có 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 tại đây

... và với jQuery:

Bạn có thể sử dụng điều này:

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

Demo tại đây

Một cách khác , sử dụng jQuery cũng ngược lại là:

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

Bản demo này ở đây .

Một cách khác là sử dụng length(số phần tử khớp với bộ chọn đó) và đi xuống từ đó bằng cách sử dụng indexmỗi lần lặp. Sau đó, bạn có thể sử dụng này:

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

Bản demo này tại đây

Một , nhiều loại liên quan đến một ở trên:

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

Demo tại đây

Tôi thích tạo một trình cắm ngược, vd

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

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

Cách sử dụng, vd:

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

Nếu bạn không muốn lưu phương thức vào jQuery.fn, bạn có thể sử dụng

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

Cần phải làm ngược lại với $ .each vì vậy tôi đã sử dụng ý tưởng Vinay:

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

làm việc tốt, cảm ơn

Bạn không thể lặp lại ngược lại với mỗi hàm jQuery, nhưng bạn vẫn có thể tận dụng cú pháp jQuery.

Hãy thử như sau:

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

Tôi thấy Array.prototype.reversekhông thành công với các đối tượng, vì vậy tôi đã tạo một hàm jQuery mới để sử dụng thay thế : jQuery.eachBack(). Nó lặp đi lặp lại như bình thường jQuery.each()và lưu trữ mỗi khóa thành một mảng. Sau đó, nó đảo ngược mảng đó và thực hiện gọi lại trên mảng / đối tượng ban đầu theo thứ tự các phím đảo ngược.

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

Tôi nghĩ bạn cần

.parentsUntill()

Bạn cũng có thể thử

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