1

我有以下设置：

 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 个参数。

4

5 回答 5

2

如果您通过 ID 查找元素，则仅使用：

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

不提供任何上下文进行搜索将始终是最快的方式。

同样，在这里您提供一个 ID 作为搜索的上下文，然后"#parent"是最快的选择器。理论上你可以用"#overParent > #parent"它来实现你的意思，但它实际上意味着更多的工作要做并且会更慢。

于 2013-01-23T08:49:22.583 回答
1

像这样的选择器'#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");
于 2013-01-23T08:49:26.353 回答
1

只需坚持使用常规的 id 选择器：

$('#element');

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

我只是在这里猜测，但我认为浏览器使用查找表通过 id 属性查找元素。

于 2013-01-23T08:53:18.470 回答
1

根据文档...

var el = $("#overParent");

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

对于 id 选择器，jQuery 使用 JavaScript 函数 document.getElementById()，效率极高。当另一个选择器附加到 id 选择器时，例如 h2#pageTitle，jQuery 在将元素识别为匹配之前执行额外的检查。

于 2013-01-23T08:55:55.867 回答
1

@搅拌机

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

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

于 2013-02-07T14:57:22.777 回答