jquery＆＃x27; s $ .closest（）vs $ .parents（）を使用します

jQuery's.closest()vs.parents()：詳細な比較

jqueryの.closest()と.parents()のどちらかを選択すると、多くの場合、主要な違いを理解することにかかっています。 この記事では、彼らの機能を明確にし、実用的な例を提供します 方法 出発点 方向を検索 return値

現在の要素 domツリーの上 ゼロまたは1つの要素

Method	Starting Point	Search Direction	Return Value
.closest()	Current element	Up the DOM tree	Zero or one element
.parents()	Parent element	Up the DOM tree	Zero or more elements (in reverse order)

親要素 domツリーの上 ゼロ以上の要素（逆の順序で）

コアの区別は出発点にあります。 .closest()現在の要素で検索を開始し、.parents()は直接の親から始まります。 どちらもDOMツリーを通って上向きに移動しますが、最初の一致する祖先で停止しますが、.closest()はルートに続き、すべての一致する先祖を集めます。 .parents()視覚表現：

の例

： .parents()を使用しています このコードは、クリックされたボタンの親

要素を削除します：

<li>

$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).parents('li').first().remove();
});

メソッドは、複数の要素を返すことができるため、

メソッドが必要です。 .first().parents()の例

：

を使用しています .closest()これにより、同じ結果がより効率的に達成されます：

最初の一致する祖先を直接返し、

$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).closest('li').remove();
});

の必要性を排除します。 さまざまなベンチマークで実証されているように、これはしばしばパフォーマンスの改善につながります。

.closest()よくある質問（FAQ）：.first()

主な違い：

<li>現在の要素から検索し、最初の試合で停止します。

親から検索し、すべての一致を返します。 .closest() .parents()

返された複数の要素： <li>せいぜい1つを返します。

複数を返すことができます。 .closest() セレクターなしで使用する.parents()

セレクターなしで <li>直接の親を返します。

.closest()特定の祖先を見つける：

両方の方法は、特定の祖先要素をターゲットにするためにセレクターを受け入れます。 <li>

一致しない：一致が見つからない場合は空のjQueryオブジェクトを返します。

<li>

症例感度：セレクターは症例に敏感です。

<li>

チェーン：両方の方法で、他のjQueryメソッドとの連鎖を許可します。

<li> 要約すると、特定のセレクターに一致する最も近い祖先を見つけるために、

は一般に、その効率とよりクリーンな構文に好まれます。 は、すべての一致する祖先要素を使用する必要がある場合に役立ちます。 特定のニーズとコーディングスタイルに最適な方法を選択してください。

以上がjquery＆＃x27; s $ .closest（）vs $ .parents（）を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。