我使用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在页面上选择一些元素,然后在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.fn.reverse = function() {
return this.pushStack(this.get().reverse(), arguments);
};
紧随其后的是
$(selector).reverse().each(...)
其他回答
这里有不同的选项:
第一:不使用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.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.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});
很好,谢谢
我认为你需要
.parentsUntill()
你也可以试试
var arr = [].reverse.call($('li'))
arr.each(function(){ ... })