13

これらの違いは何ですか？一方はもう一方よりも効率的ですか？なぜ両方が存在するのか、少し混乱しています。私がこのマークアップを持っているとしましょう：

<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>

4

3 に答える 3

18

（注：質問は尋ねられた翌日に編集され、質問を約parentから約parents[複数形に注意]に変更しました。どのような違いがありますか！）

(singular) vs.に関するあなたの最初の質問について: 1 レベルしか上がりません。現在の要素 (親だけでなく) から開始し、一致する要素が見つかるまで (または祖先がなくなるまで) 祖先を検索し続けます。parentclosestparentclosest

(plural) vs.に関する更新された質問について: 2 つの違いがあります。parentsclosest

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

  2. 検索が最初の一致で停止するかどうか ( では停止しますが、 では停止しclosestませんparents)。

元の質問から:

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

いいえ、実際には。の親がセレクターと一致しない$(this).parent('tr');ため、空の jQuery オブジェクトが返されます。span

更新された質問から:

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

別のテーブル (テーブルを含むテーブルなど)内にない場合は、可能です。その場合は、同じ結果が得られます。ただし、テーブル内にテーブルがある場合は、複数の を取得します(すべての祖先要素)。trtrparentstrtr

次の構造を検討してください。

<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')- 「内部」および「ラッパー」の div という2 つ の s を持つ jQuery オブジェクト(この順序で)。div
  • $(this).closest('div')- 1 つ を含む jQuery オブジェクトdiv、「内部」オブジェクト。

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

  • $(this).parent('span')- 空の jQuery オブジェクトです。 の親は でspanはありませんspan。
  • $(this).parents('span')- 空の jQuery オブジェクト。span祖先がありませんspan。
  • $(this).closest('span')span-クリックされた を持つ jQuery オブジェクト。
于 2012-01-23T17:35:17.907 に答える
5

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

一般に、セレクターを適切に選択した場合、closestは よりも HTML コードのリファクタリングに対して抵抗力があります。parent

于 2012-01-23T17:36:50.453 に答える
1

.parent()closest()現在の要素とすべての親を含みますが、1 レベルだけ上がります。

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

             parent()  parent('body')   .closest('div')  .parents('div')
body     
   div                                                       x
      div       x        <nothing>                           x
this-->   div                                x
于 2012-01-23T17:35:12.683 に答える