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/