jQuery-知道前2個父母的最快選擇器

Question

我有以下設置：

 var el = $("#overParent");
 // Do whatever with el here.
 var cls = $(".valueElement", "#parent"); // Get elements with class valueElement inside element with id parent
 // Do whatever

這是可行的，但我想知道是否可以加快速度。 我知道#parent是#overParent中已被選擇的元素。 我可以用某種方式僅掃描el #overparent的#parent然后獲取具有指定類的元素嗎？

類似於： $(".valueElement", "#parent", el)但根據文檔， $僅接受2個參數。

Answer 1

如果要通過ID查找元素，則只需使用：

var $element = $('#id');

不提供任何上下文搜索將永遠是最快的方法。

同樣，在此處提供ID作為搜索上下文的地方，則"#parent"是最快的選擇器。 從理論上講，您可以使用"#overParent > #parent"來實現您的意思，但實際上這意味着要做更多的工作，而且速度會更慢。

Answer 2

像'#theId'這樣的選擇器不會使jQuery掃描文檔，因為它使用document.getElementById 。

如果要查找知道其ID的元素，即使您知道其父元素，也請始終使用$('#theid') 。

實際上，如果您提供父對象作為上下文，則jQuery將調用document.getElementById 然后檢查父對象是否包含找到的元素。 因此，這要慢得多。

從源代碼：

    // Speed-up: Sizzle("#ID")
    if ( (m = match[1]) ) {
        if ( nodeType === 9 ) {
            elem = context.getElementById( m );
            // Check parentNode to catch when Blackberry 4.6 returns
            // nodes that are no longer in the document #6963
            if ( elem && elem.parentNode ) {
                // Handle the case where IE, Opera, and Webkit return items
                // by name instead of ID
                if ( elem.id === m ) {
                    results.push( elem );
                    return results;
                }
            } else {
                return results;
            }
        } else {
            // Context is not a document
            if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
                contains( context, elem ) && elem.id === m ) {
                results.push( elem );
                return results;
            }
        }

同樣，如果要選擇一個類的所有元素，請不要指定父級，這無濟於事。

在您的情況下，由於您似乎想使用父項來限制集合，因此只需使用

$(".valueElement", "#parent");

Answer 3

只需堅持使用常規id選擇器即可：

$('#element');

即使您已經選擇了父元素，它仍然是最快的： http : //jsperf.com/id-test-123

我只是在猜測，但是我認為瀏覽器使用查找表通過其id屬性查找元素。

Answer 4

根據文檔 ...

var el = $("#overParent");

這是極其有效的，它附加了另一個選擇器。

對於id選擇器，jQuery使用JavaScript函數document.getElementById（），這非常高效。 當另一個選擇器附加到id選擇器（例如h2＃pageTitle）時，jQuery在將元素標識為匹配項之前執行附加檢查。

Answer 5

@攪拌機

如果使用類並緩存context元素，則提供上下文的速度更快：

http://jsperf.com/id-test-123/3