JQuery .each() 向后

Question

我使用 JQuery 选择页面上的一些元素，然后在 DOM 中移动它们。我遇到的问题是我需要以与 JQuery 自然选择它们相反的顺序选择所有元素。例如：

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

我想选择所有 li 项目并对它们使用 .each() 命令，但我想从项目 5 开始，然后是项目 4 等。这可能吗？

Answer 1

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

Answer 2

我以世界上最小的 jquery 插件的形式向您展示有史以来最干净的方式：

jQuery.fn.reverse = [].reverse;

用法：

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

-所有功劳均归功于 Michael Geary 在此处的帖子： http://www.mail-archive.com/[电子邮件受保护]/msg04261.html

Answer 3

您可以执行

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

以下操作

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

Answer 4

这里有不同的选项：

第一个：不使用 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;
});

演示此处

。 .. 并使用 jQuery：

您可以使用此：

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

演示此处

另一种方式，使用还有 jQuery 与 反向 是：

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

此演示此处。

另一种替代方案是使用length（与选择器匹配的元素计数），并使用每次迭代的index从那里向下。然后你可以使用这个：

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

这个演示这里

还有一个< /strong>，与上面的有点相关：

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

演示此处

Answer 5

我更喜欢创建一个反向插件，例如

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

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

用法，例如：

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

Answer 6

如果你不想将方法保存到 jQuery.fn 中，你可以使用

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

Answer 7

需要对 $.each 进行反向操作，所以我使用了 Vinay 的想法：

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

效果很好，谢谢

Answer 8

您无法使用 jQuery every 函数向后迭代，但您仍然可以利用 jQuery 语法。

请尝试以下操作：

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

我发现 Array.prototype.reverse 对于对象不成功，因此我创建了一个新的 jQuery 函数作为替代：jQuery.eachBack()。它像普通的 jQuery.each() 一样进行迭代，并将每个键存储到一个数组中。然后它反转该数组并按照反转键的顺序对原始数组/对象执行回调。

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 10

这个答案类似于JoeChung的答案，不同之处在于通过这段代码你可以只使用容器元素（ul）：

$($("ul").children().get().reverse()).each(function(i, elm) {

    console.log($(elm).text()) 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

Answer 11

你也可以尝试

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

Answer 12

我想你需要

.parentsUntill()