jquery - jQuery-等价于原型 Down()-function

Question

我正在将一个 webapp 从原型移植到 jquery，其中我经常使用原型 Down() 函数。（选择给定元素的第一个子元素）

浏览 JQuery-api 的方法之一是：

原型：$('abc').down(); jquery: $('abc').children().first();

但是，由于这首先获取所有孩子并应用过滤器，所以我怀疑它对于这个用例是否有效。

有什么更好的方法？

Answer 1

您可以扩展 jQuery，并添加down()如下函数：

(function($) {
  $.fn.down = function() {
    return $(this[0] && this[0].children && this[0].children[0]);
  };
})(jQuery);

这样您就不必更改代码中的任何内容。

您可以看到这个现场jsFiddle 示例。
您还可以在jsPerf中查看性能比较。
它表明这比其他答案中提出的方法要快（慢 40% 到 70%）。

编辑：
改编自实际原型实现的替代版本。这甚至更快（25%）

(function($) {
  $.fn.down = function() {
    var el = this[0] && this[0].firstChild;
    while (el && el.nodeType != 1)
      el = el.nextSibling;
    return $(el);
  };
})(jQuery);

Answer 2

有几种方法可以做到这一点。

首先，这将返回一个包含单个元素的数组。

$('form').children().first(); 

另请注意，这是一个更易读的版本 $('form').children(":eq(0)")；

其次，这仅返回从数组中提取的元素

$('form').children()[0];

或者，如果您知道您之后的元素类型（而不仅仅是第一个子元素，无论元素类型如何），您可以使用：

$('form').find("input:first");

最后，如果您并不严格需要相对于其父元素的元素，您可以直接使用 CSS3 选择器访问它：

$("input:first");

如果你能侥幸逃脱，我怀疑最后一个选项是最有效的。但是，如果有人对效率有更多的看法，我想听听。

Answer 3

尝试：

$('abc').children(":eq(0)")