.closest() と .parents('selector') の違いは何ですか?

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

  •  12-11-2019
  •  | 
  •  

質問

これらの違いは何ですか?一方は他方よりも効率的ですか?なぜ両方が存在するのか少し混乱しています。次のマークアップがあるとします。

<table>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>..</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
</table>

から <span> 使えそうなタグ どちらか $(this).closest('tr'); または $(this).parents('tr'); 親/最も近いものにアクセスするには <tr> 鬼ごっこ。

役に立ちましたか？

解決

parent 直接の親 (呼び出し元オブジェクトの要素ごとに 1 つ) を返すか、親がセレクターと一致しない場合は何も返しません。 closest 各要素の祖先に一致する最も近い祖先を返します (元の要素の場合もあります)。3 番目の同様の関数は、 parents, 、一致するすべての祖先を返します (要素自体は含まれません)。

一般的に、 closest よりも HTML コードのリファクタリングに対する耐性が高くなります。 parent, セレクターを賢明に選択した場合。

他のヒント

（注記：質問は行われた翌日に編集され、質問が約から変更されました。 parent 存在することに parents [複数形であることに注意してください]。どちらが違いを生むのか！）

あなたの オリジナル についての質問 parent (単数形) vs. closest: parent 1レベル上がるだけです。 closest 現在の要素 (親だけでなく) から開始し、一致する要素が見つかるまで (または祖先がなくなるまで) 祖先を検索し続けます。

最新情報を再確認してください 質問 について parents (複数) vs. closest:違いは 2 つあります。

  1. 現在の要素が考慮されるかどうか ( closest, 、それはありません parents).

  2. 検索が最初の一致で停止するかどうか ( closest, 、それはそうではありません parents).

あなたから オリジナル 質問：

タグからは $(this).closest('tr'); のいずれかを使用できます。または $(this).parent('tr');

いや、実際のところ。 $(this).parent('tr'); の親は空の jQuery オブジェクトを返します。 span セレクターと一致しません。

あなたから 更新しました 質問：

タグからは $(this).closest('tr'); のいずれかを使用できます。または $(this).parents('tr');

あなたは出来る、 提供された それはあなたの tr 他のものの中にもありません tr (例: テーブルを含むテーブル)。その場合、同じ結果が得られます。ただし、テーブルの中にテーブルがある場合は、 parents 複数取得できます trs (全て 祖先の tr 要素）。

次の構造を考えてみましょう。

<div class="wrapper">
  <div class="inner">
    <p>Testing <span>1 2 3</span></p>
  </div>
</div>

フックすれば click で span, 、これは 3 つの関連メソッドから返されるものです。

  • $(this).parent('div') - 空の jQuery オブジェクト、 span ではありません div.
  • $(this).parents('div') - jQueryオブジェクトを使用 二 divその中には、「inner」 div と「wrapper」 div が (この順序で) 含まれています。
  • $(this).closest('div') - jQueryオブジェクトを使用 1つ div その中にあるのが「内側」です。

フックした場合の結果は次のとおりです click で span そして使用します span セレクターとして:

  • $(this).parent('span') - 空の jQuery オブジェクト、 span ではありません span.
  • $(this).parents('span') - 空の jQuery オブジェクト、 span 先祖がいない spans.
  • $(this).closest('span') - jQuery オブジェクトと span それがクリックされました。

.parent() 1レベルしか上がらないのに対し、 closest() 現在の要素とすべての親が含まれます。

例（下から選択） div, x = 一致した要素):

             parent()  parent('body')   .closest('div')  .parents('div')
body     
   div                                                       x
      div       x        <nothing>                           x
this-->   div                                x
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top