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が、動的な引数を使用して物事を比較し、完全にカスタムオーダーすることはできません。$newObjectVar.eq(0) = $myClass.eq(3);また、たとえば、このように要素を渡すことができる新しい空の jquery オブジェクトを作成することも検討しました。しかし、まだこのような空白の jQuery オブジェクトを作成する方法を見つけていません。

4

1 に答える 1

4

このようなカスタム メソッドを作成して、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]);

もう少し考えた後、渡された配列にエラーが含まれていても重複や穴を防ぐため、はるかに堅牢な別の方法を次に示します。結果は、渡された配列のインデックスに一致する要素のみになります。範囲外の複製またはインデックスは無視されます。

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 に答える