檢查jQuery對象是否具有某些DOM元素的最快方法

Question

我有一個帶有一些DOM元素的jQuery對象。 我將這個對象分類。 但是某些元素具有優先級，因此當我排序時，我不能讓它們放在沒有優先級的元素之下。

例：

<!-- original list -->
<el id='2' /> <!-- has priority -->
<el id='0' /> <!-- has priority -->
<el id='3' /> <!-- has priority -->
<el id='1' /> <!-- no priority -->
<el id='4' /> <!-- no priority -->

<!-- wrong way to sort -->
<el id='0' /> <!-- has priority -->
<el id='1' /> <!-- no priority -->
<el id='2' /> <!-- has priority -->
<el id='3' /> <!-- has priority -->
<el id='4' /> <!-- no priority -->

<!-- right way to sort -->
<el id='0' /> <!-- has priority -->
<el id='2' /> <!-- has priority -->
<el id='3' /> <!-- has priority -->
<el id='1' /> <!-- no priority -->
<el id='4' /> <!-- no priority -->

我如何解決這個問題：

var elements = $(selector);
elements.sort(sort_by_id);
var priority_elements = get_prio_elements(); //That's the only way to know which are the elements with priority
var temp = $();
elements.each(function(){
    if(priority_elements.is(this))  //check if element are inside priority list
        temp = temp.add($(this));  //push element in elements object order
});
set_prio_elements(temp);

我的輸出應該是temp對象。 我的意思是： temp應該包含：

<el id='0' /> <!-- has priority -->
<el id='2' /> <!-- has priority -->
<el id='3' /> <!-- has priority -->

按此順序。

問題在於，對於大型列表（超過300 +-），此代碼非常慢。 我想知道如何改善這一點。

小提琴中的鏈接可以幫助您理解。

Answer 1

了解您的JS代碼實際上在做什么，這很棘手，因為您似乎錯過了幾個關鍵功能。

話雖如此，您聲明您想要的輸出是首先按元素的priority對元素進行排序，然后對它們的id進行排序。 您可以在單個sort()調用中執行此操作。

首先請注意，創建自己的屬性無效，因此priority應為data-priority 。 在這里，您可以實現自己的sort()邏輯，如下所示：

$(selector).sort(function(a, b) {
    var $a = $(a), 
        $b = $(b), 
        aId = parseInt(a.id, 10), 
        bId = parseInt(b.id, 10);

    // sort by priority
    if ($a.data('priority') && !$b.data('priority'))
        return -1;
    else if (!$a.data('priority') && $b.data('priority'))
        return 1;

    // sort by id
    if (aId < bId)
        return -1;
    else if (aId > bId)
        return 1

    return 0;
});

工作實例

請注意，可以通過使用三元表達式將以上內容簡化很多，但是我將其保留為冗長的，以便您可以清楚地看到正在發生的事情。

Answer 2

您不能僅在sort_function中檢查元素的“ priority”屬性是否設置為“ true”？

我首先將所有元素收集到2個數組中：一個用於priority ='true'，另一個用於相反的數組，對這些數組進行排序，然后將它們連接起來。

---

更新：我創建了這個小提琴，看是否可以適應它，如果喜歡的話，然后看它是否更節省資源。
我猜是這樣，因為您不必再​​次遍歷整個“元素”對象，但是我可能是錯的。

https://jsfiddle.net/virginieLGB/qev5r9yx/

更改內容：
1）我們對兩個對象都進行排序

elements.sort(sort_by_id);
priority_elements.sort(sort_by_id);

2）我們只需將優先級元素放回開頭就可以刪除它們，然后取消移位

  for( var i = elements.length - 1 ; i >= 0 ; i-- ) {
    var index = priority_elements.indexOf( elements[ i ] );
    if( index > -1 ) {
        var temp = elements[ i ];
        elements.splice( i , 1 );
      elements.unshift( temp );
      priority_elements.splice( index , 1 );
    }
  }

---

更新＃2：

我的輸出應該是臨時對象。 我的意思是：temp應該包含：
<el id='0' /> <!-- has priority -->
<el id='2' /> <!-- has priority -->
<el id='3' /> <!-- has priority -->

那好吧，你為什么不做

priority_elements.sort( sort_by_id );

？
因為基本上，您似乎正在做的事情是獲取優先級元素，然后在原始列表中檢查它們是否具有優先級，如果有優先級，則僅保留它們...但是您已經首先擁有了它們？ 還是我錯過了什么？