jQuery-equivalent down（） - 関数

StackOverflow https://stackoverflow.com/questions/3989512

  •  10-10-2019
  •  | 
  •  

質問

プロトタイプからjQueryへのWebAppを移植しています。そこでは、プロトタイプダウン（）関数をよく使用しています。 （特定の要素の最初の子を選択する）

jquery-apiを見て、これを行う方法の1つは次のとおりです。

プロトタイプ：$（ 'abc'）。down（）; jQuery：$（ 'abc'）。children（）。first（）;

ただし、これはすべての子供をすべて取得し、フィルターを回避するため、このユースケースには効率的であるとは思いません。

より良い方法は何ですか？

役に立ちましたか？

解決

jqueryを拡張し、aを追加できます 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);

他のヒント

これを行う方法はいくつかあります。

最初に、これは単一要素を含む配列を返します。

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

また、これはより読みやすいバージョンです$('form').children(":eq(0)");

第二に、これは配列から抽出された要素のみを返します

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

または、（要素の種類に関係なく最初の子供ではなく）後の要素のタイプを知っている場合：

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

最後に、親に対する要素を厳密に必要としない場合は、CSS3セレクターを使用して直接アクセスできます。

$("input:first");

この最後のオプションは、逃げることができれば最も効果的なものだと思います。しかし、誰かが効率性についてもっと言うべきなら、私はそれを聞きたいです。

試す：

$('abc').children(":eq(0)")
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top