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

根据docs ...

var el = $("#overParent");

如果附加了另一个选择器，这是非常有效的......

对于id选择器，jQuery使用JavaScript函数document.getElementById（），这非常有效。当另一个选择器附加到id选择器时，例如h2＃pageTitle，jQuery在将元素标识为匹配之前执行额外的检查。

Answer 5

@Blender

如果您正在使用类并缓存上下文元素，则提供上下文的速度会更快：

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

jquery - 知道前2个父母的最快选择器

5 个答案: