JQuery .each()向后

我使用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等。这可能吗?

225222 次浏览
小开

虽然不能使用jQuery的每个函数向后迭代，但仍然可以利用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
}
小开
最佳答案 
$($("li").get().reverse()).each(function() { /* ... */ });
小开

你可以这样做

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

紧随其后的是

$(selector).reverse().each(...)
小开

需要对$做反向操作。所以我用了维奈的想法:

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

很好，谢谢

小开

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

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

我以世界上最小的jquery插件的形式为您呈现有史以来最干净的方式:

jQuery.fn.reverse = [].reverse;

用法:

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

-所有功劳都归功于Michael Geary在他的帖子中:http://www.mail-archive.com/discuss@jquery.com/msg04261.html

小开

这里有不同的选项:

第一个:没有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));
});

这个演示这里<强> < / >强

多一个，有点与上面那个相关:

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

演示here

小开

我认为你需要

.parentsUntill()
小开

我发现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);
}
小开

如果你不想保存方法到jQuery。Fn你可以用

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

你也可以试试

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

提交答案