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如JavaScript的一部分的基本方式，但.sort需要動態參數比較事物，並且不允許完全自定義的順序。我還着眼於創建一個新的空白jquery對象，例如我可以將元素傳遞給$newObjectVar.eq(0) = $myClass.eq(3);。但到目前爲止，我還沒有找到一種方法來製作一個像這樣的空白jQuery對象。

Answer 1

您可以製作像這樣的自定義方法，以重新排序jQuery對象中現有的DOM元素。一個問題是，對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和孔即使在通過陣列中有錯誤。結果將只是與傳入的數組中的索引匹配的元素。任何超出範圍的dups或index都將被忽略。

做事的方式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()

這裏有一個工作測試平臺使用：http://jsfiddle.net/jfriend00/DPhc9/