過濾器元件出了jQuery選擇

我有一個選擇表單中所有的元素和序列化他們這樣的頁面：過濾器元件出了jQuery選擇

var filter = 'form :not([name^=ww],[id$=IDF] *,.tools *)'; 
var serialized = $(filter).serialize();

這工作，除非形式得到周圍600+元素。然後用戶得到的JavaScript錯誤，說腳本運行緩慢，並可能使他們的瀏覽器無響應。然後它給他們停止運行腳本的選項。

我已經嘗試單獨運行過濾器，我試圖使用.not在選擇器上，然後序列化它們，但我碰到兩個問題之一。它可以在沒有錯誤的情況下運行得更快，但也不會過濾元素，也可以過濾元素併爲我提供緩慢的腳本錯誤。

任何想法？

來源

2010-07-15 Barlow Tucker

*爲什麼，哦爲什麼*你會在HTML中有600多個輸入元素！？！？ – 2010-07-15 15:03:06

你的問題不是選擇器。重新設計你的頁面，使其使用較少的輸入字段。重新設計你的邏輯，以便它不需要在腳本中序列化數百個項目。具有較少輸入字段的 – 2010-07-15 15:09:08

不是一種選擇。我不能詳細說明，但這是設計 – 2010-07-15 15:16:07

有了600個多元素這將是死慢。您需要爲Sizzle（jQuery的選擇器引擎）提供一些優化的機會。

首先考慮的是jQuery可使用固有支持querySelectorAll方法（在現代的瀏覽器），如果你的選擇與CSS3 spec（或至少是什麼在瀏覽器中編輯器目前支援的範圍內）的規定。

在你的情況下，這意味着只能通過一個簡單選擇器到:not而不是3（1簡單，2複雜）。

form :not([name^=ww])

那會是相當快......雖然你不善待那些不支持querySelectorAll瀏覽器。

看看你的選擇器，並考慮Sizzle與每個元素有多少關係。首先它需要獲得頁面內的所有元素（你不是預標準:not選擇器與標記/類/ id）。然後，每個元素就可以執行以下操作：

（假設它退出，如果檢查結果爲假）

檢查家長有與form的nodeName.toLowerCase()的祖先。
檢查它是否具有ww（基本indexOf操作）開始的name屬性。
檢查它是否有一個id屬性以IDF結尾的祖先。（昂貴的操作）
檢查它是否具有包含tools的class屬性的祖先。

最後兩個操作很慢。

這可能是最好手動構建filter函數，如下所示：

var jq = $([1]); 
$('form :input').filter(function(){ 

    // Re-order conditions so that 
    // most likely to fail is at the top! 

    jq[0] = this; // faster than constructing a new jQ obj 

    return (

     !jq.closest('[id$=IDF]')[0] 
      // this can be improved. Maybe pre-qualify 
      // attribute selector with a tag name 

     && !jq.closest('.tools')[0] 

     && this.name.indexOf('ww') !== 0 

    ); 

});

注意：該功能是未測試的。希望你能明白...

來源

2010-07-15 15:39:43 James

+1尼斯分析。 – 2010-07-15 15:42:09

哇，看起來不錯！我會試一試並在此發佈結果。謝謝。 – 2010-07-15 15:49:20

我想補充一點，如果我能看到標記，我可以幫助優化這個。我仍然有關於它的問題......比如：有多少個[id $ = IDF]元素，並且它們都是不同的標籤？他們沒有辦法給予同一個班級嗎？ – James 2010-07-15 15:59:05

你可能只是序列化整個表單，並在後端做你的過濾？另外，爲什麼 - 哦，爲什麼表單增長到600多個字段？

來源

2010-07-15 15:01:39 rfunduk

這將工作，但我需要在做回發之前在序列化表單上做一些邏輯 – 2010-07-15 15:18:02

嗯，我會嘗試發回你需要執行的任何數據該邏輯返回請求，並讓後端執行該操作。這樣你就可以在整個表單上進行'serialize'操作，這應該是相當快的（例如，不在列表中，而是在一個表單元素上），然後在後端退出時簡單地顯示一個微調器。 – rfunduk 2010-07-15 15:33:41

使用:input選擇，只選擇適用的元素..

來源

2010-07-15 15:06:12

我會試一試 – 2010-07-15 15:17:03

@barlow，我想我的答案可能是錯誤的..我相信序列化只會選擇'：input'元素默認情況下......但jquery api網站目前停止並且無法驗證.. – 2010-07-15 15:22:24

過濾器元件出了jQuery選擇

回答

相關問題