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