我正在使用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开始,等等。这可能吗?
$($("li").get().reverse()).each(function() { /* ... */ });
我以世界上最小的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.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));
});
这个演示在这里。
另一种选择是使用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);
});
在这里演示
我更喜欢创建一个反向插件
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.fn中,则可以使用
[].reverse.call($('li'));
需要对$ .each进行反向操作,因此我使用了Vinay的想法:
//jQuery.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});
工作很好,谢谢
您无法使用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
}
我发现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);
}
我觉得你需要
.parentsUntill()
您也可以尝试
var arr = [].reverse.call($('li'))
arr.each(function(){ ... })
本文地址:http://javascript.askforanswer.com/jquery-eachxianghou.html
文章标签:arrays , javascript , jquery , reverse
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:arrays , javascript , jquery , reverse
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!