JQuery-эквивалент прототипам Down () - функция

Question

Я портирую веб-приложение из прототипа в 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)")