jQueryオブジェクト内の要素を並べ替える

Question

<div class="myClass">1</div> 
<div class="myClass">2</div> 
<div class="myClass">3</div> 
<div class="myClass">4</div> 
<div class="myClass">5</div> 
<div class="myClass">6</div> 

var $myClass = $('.myClass'); 
$myClass.eq(0).text() //returns '1' 
$myClass.eq(4).text() //returns '5' 
$myClass.eq(5).text() //returns '6' 

jQueryのオブジェクトを手作業で並べ替えるだけです。私が本当に欲しい

//fantasy command reversing 
$myClass.eqSorter([5,4,3,2,1,0]); 
$myClass.eq(0).text() //returns '6' 
$myClass.eq(5).text() //returns '1' 

は

//fantasy command custom ordering 
$myClass.eqSorter([3,5,4,2,0,1]); 
$myClass.eq(0).text() //returns '4' 
$myClass.eq(5).text() //returns '2' 

は、今私はジャバスクリプトの一部として.sortのようにこれを行うための基本的な方法を見てきました完全カスタムオーダー入力を許可することですが、.sortはダイナミックになります引数は物事を比較し、完全な注文を許可しません。私はまた、例えば$newObjectVar.eq(0) = $myClass.eq(3);のように要素を渡すことができる新しい空白のjqueryオブジェクトを作成することに注目しました。しかし、まだ私はこのような空のjQueryオブジェクトを作る方法を見つけていません。

Answer 1

jQueryオブジェクトの既存のDOM要素を並べ替えるカスタムメソッドを作成できます。 1つの問題は、jQueryオブジェクトに対する多くの操作がDOM順序に並べ替えるため、jQueryオブジェクトに対して他の操作を実行すると、この順序で処理できないことです。いくつかのより多くの思考の後

jQuery.fn.eqSorter = function(array) { 
    // get copy of DOM element array 
    var copy = this.toArray(); 
    // don't exceed bounds of arrays 
    var len = Math.min(array.length, copy.length); 
    for (var i = 0; i < len; i++) { 
     var index = array[i]; 
     // make sure incoming index is within bounds of DOM object array 
     if (index < copy.length) {   
      // put the index item into the i location 
      this[i] = copy[index]; 
     } 
    } 
    return this; 
} 

$myClass.eqSorter([5,4,3,2,1,0]); 

---

、ここではそれが渡された配列は、その中にエラーがあってもDUPのと穴を防ぐようにもたくさんより堅牢で物事の別の方法です。結果は渡された配列のインデックスと一致する要素のみになります。範囲外のdupまたはインデックスは無視されます。

jQueryのやり方は、通常、特定のjQueryオブジェクトのDOM要素を変更するのではなく、既存のjQueryオブジェクトを新しいjQueryオブジェクトに変更することです。そのように実装するには、追加堅牢で、あなたはこれを行うことができます：

jQuery.fn.eqSorter = function(array) { 
    var elems = [], doneIndexes = {}, index; 
    for (var i = 0, len = array.length; i < len; i++) { 
     index = array[i]; 
     // if the index is not out of range and it's not a dup, 
     // then get the corresponding DOM element from the jQuery object 
     // and put it into the new array 
     if (!doneIndexes[index] && index < this.length && index >= 0) { 
      elems.push(this[index]); 
      doneIndexes[index] = true; 
     } 
    } 
    return this.pushStack(elems, "eqSorter", arguments); 
} 

var $myOrderedObj = $myClass.eqSorter([5,4,3,2,1,0]); 

これは、次のような動作があります。配列で渡さ無視されるで

• どれ重複インデックスを（最初の一つだけです範囲外の処理）
• 任意のインデックスは、結果に表示されませんインデックスによって参照されていない初期のjQueryオブジェクトに
• 任意のDOM要素を無視さ
• このメソッドは、新しいjQueryオブジェクトを返し、.end()

ここで働くのテストベッドがありますで使用することができます：配列としてjQueryオブジェクトのhttp://jsfiddle.net/jfriend00/DPhc9/