web-dev-qa-db-ja.com

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を始めたいのですが、これは可能ですか？

javascriptjqueryarraysreverse
421
Jack Mills
$($("li").get().reverse()).each(function() { /* ... */ });
646
Joe Chung

私は、世界最小のjqueryプラグインの形で、これまでにない最もクリーンな方法を紹介します。

jQuery.fn.reverse = [].reverse;

使用法：

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

マイケル・ギアリー氏の投稿はここにあります。 http://www.mail-archive.com/[email protected]/msg04261.html

395
Waldo Hampton

できるよ

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

に続く

$(selector).reverse().each(...)
61
Vinay Sajip

これにはさまざまなオプションがあります。

最初の：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も使用するもう1つの方法 reverse 

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

このデモ こちら 。

もう1つの代替方法は、length（そのセレクタに一致する要素の数）を使用し、各反復のindexを使用してそこから下に進むことです。それからこれを使うことができます：

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

このデモ こちら

上記のものに関連するもう1つの：

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

デモはこちら

17
Sergio

私はリバースプラグインを作成することを好む

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);
});
13
James Westgate

メソッドをjQuery.fnに保存したくない場合は、

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

$ .eachを逆にする必要があったのでVinayのアイデアを使いました：

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

うまくいった、ありがとう

4
finklez

関数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
}
2
David Andres

私は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);
}
1
NRTRX

私はjQueryがプラグインをサポートし奨励することを認識しています。とは言っても、この記事は関連性があります。 所有していないオブジェクトを変更しないでください 。少なくともこのケースでは、私は別のプラグインが逆に定義しているという別の機会にjQueryを拡張しないことを選びました。

これがjQueryオブジェクトを拡張しない簡単な解決策です。

function jqueryReverse( set ) {

    return [].reverse.call( set );
}

console.log( jqueryReverse( $( 'li' ) ) );
0
Lachmanski