Question

我正在将一个webapp从prototype移植到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 example 您还可以在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)")

JQuery相当于原型Down（） - 函数

3 个答案: