1 
<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 对象。

4

1 回答 1

4

您可以创建一个这样的自定义方法，对 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]);

经过一番思考，这是另一种更强大的做事方式，因为即使传入的数组中有错误，它也可以防止重复和漏洞。结果将仅是与传入数组中的索引匹配的元素。任何超出范围的重复或索引都将被忽略。

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/

于 2012-04-05T21:31:18.097 回答