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


当前回答

这里有不同的选项:

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

这个演示。

另一种替代方法是使用长度(匹配该选择器的元素计数),然后使用每次迭代的索引从那里向下。然后你可以用这个:

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

演示

其他回答

虽然不能使用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:

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

这个演示。

另一种替代方法是使用长度(匹配该选择器的元素计数),然后使用每次迭代的索引从那里向下。然后你可以用这个:

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

演示

我发现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 = function() {
    return this.pushStack(this.get().reverse(), arguments);
}; 

紧随其后的是

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