我已经看到很多关于使用 jQuery 选择第一个子元素的最快方法的讨论。正如所料, native DOM firstChild 属性比使用 jQuery 选择器或选择器组合要快得多 - 请参阅 http://jsperf.com/jquery-first-child-selection-performance/6 。这通常不是问题——要么它被用在性能不是什么大问题的地方,要么很容易访问 DOM 元素并使用它的 .firstChild 属性。然而,这有几个问题:
- firstChild 可以返回文本或注释节点,而不是元素,就像 jQuery 选择器返回的那样
- 如果我需要选择多个元素的第一个子元素,我必须使用缓慢的选择器,或者进行大量额外的工作来迭代 DOM 元素,将它们添加到集合中,然后将它们放回到 jQuery 对象中.
在我看来,向核心 jQuery 库添加firstChild 方法的成本将远远小于其 yield 。我自己尝试创建这样一个供我自己使用的方法:
$.fn.firstChild = function() {
var ret = [];
this.each(function() {
var el = this.firstChild;
//the DOM firstChild property could return a text node or comment instead of an element
while (el && el.nodeType != 1)
el = el.nextSibling;
if (el) ret.push(el);
});
//maintain jQuery chaining and end() functionality
return this.pushStack(ret);
};
在我在 http://jsperf.com/jquery-multiple-first-child-selection 创建的测试中,此功能的执行速度比任何其他选项快五倍以上。这些测试基于上述测试,但选择多个元素的第一个子元素,而不是单个元素。
我有什么遗漏的吗?我应该使用的技术?或者这是一个不应该担心的问题?有没有理由不在 jQuery 中包含这样的函数?
最佳答案
"Why does jQuery not provide a .firstChild method?"
很可能是功能蠕变。
它可以用您所说的其他方法来完成,如果性能是一个问题,您可以像您所做的那样扩展 jQuery 以满足特定需求。
<小时/>您可以进一步提高代码的性能...
$.fn.firstChild = function () {
var ret = [];
// use a for loop
for (var i = 0, len = this.length; i < len; i++) {
var this_el = this[i],
el = this_el.firstElementChild; // try firstElementChild first
if (!el) {
el = this_el.firstChild;
while (el && el.nodeType != 1)
el = el.nextSibling;
}
if (el) ret.push(el);
}
//maintain jQuery chaining and end() functionality
return this.pushStack(ret);
};
关于jquery - 为什么 jQuery 不提供 .firstChild 方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10098367/