32

jQueryを使用して要素の祖先を選択することは可能ですか?

マークアップ:

<div id="ancestor-1">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>
<div id="ancestor-2">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>

脚本：

$(".click-me").click(function(){
    // var ancestorId = ???;
    alert(ancestorId)
});
4

6 に答える 6

50

parent()直接の親要素を試してください。

$(".click-me").click(function() {
  var ancestor = $(this).parent();
  alert(ancestor)
});

またはparents()、一致するすべての祖先要素に対して。

$(".click-me").click(function() {
  var ancestors = $(this).parents(".some-ancestor");
  alert(ancestors)
});

またはclosest()、最初に最も近い一致する要素 (先祖または自己のいずれか) の場合。

$(".click-me").click(function() {
  var ancestor = $(this).closest(".some-ancestor");
  alert(ancestor)
});

parents()との違いclosest()は微妙ですが重要です。 closest()一致する場合は現在の要素を返します。祖先のみparents()を返します。多くの場合、現在の要素を返す可能性は望ましくありません。 また、1 つの要素のみを返します。一致するすべての要素を返します。closest()parents()

于 2010-02-04T15:22:45.340 に答える
11

このようなことを意味しますか？

$('.click-me').click(function() {
    var $theAncestor = $(this).closest('#ancestor-1');
}

これにより、一致が見つかるまですべての祖先が検索されます。

http://api.jquery.com/closest/

編集：

ジェローム、あなたの質問はいくつかの方法で解釈できます。これは、jQuery のパワーと柔軟性を物語っています。

以下をご検討ください。

まず、あなたの質問に答えるために、はい、jQuery を使用して要素の祖先を選択することは可能です。

祖先であれ子孫であれ、次の方法で任意の要素を選択できるjQueryの機能を認識していると想定できると思います。

$('#myElement')

クリックミーの例で、要素のすべての祖先のセットを返したい場合は、次を使用します。

$(this).parents()

また

$(this).parents(selector)

ただし、これはすべての祖先をトラバースしてすべてを返すか、セレクターが指定されたときに一致するすべてを返すことに注意してください。

直接の親を返したい場合は、次を使用します。

$(this).parent()

必要な祖先がわかっている場合は、次を使用します。

$(this).closest(selector)

ただし、最初の一致のみが返されることに注意してください。現在の要素 (this) が一致する場合は、それが返されます。

これが役立つことを願っています。

于 2010-02-04T15:21:37.180 に答える
2

parent() または closest() を、おそらくセレクタと組み合わせて使用​​して、どの祖先が一致するかを判断してみてください。たとえば、id を持つ最も近い祖先 div を見つけます。

$('.click-me').click( function() {
      var ancestorId = $(this).closest('div[id]');
      alert(ancestorId);
});
于 2010-02-04T15:27:36.110 に答える
0

お探しparent()ですか？親セレクターのjQuery Doc 。シナリオと異なる場合は、予想される出力を説明してください。

于 2010-02-04T15:21:30.180 に答える
0

それは本当にあなたが達成したいものに依存します。使用されているクラスに関係なく、すべての祖先を検索しますか? または、先祖であり、特定のクラス (あなたの場合は先祖-x) を持つすべての要素を検索しますか?

任意の祖先を循環させたい場合は、単純に.parent() (すべての要素を循環させる優れた例があります) または.parents()を使用して、次のように使用できます。

$(".click-me").click(function(){
    var parentElements = $(this).parents().map(function () {
        return this.tagName;
    })
    // whatever else you want to do with it
});

おそらく最良の方法は.parents()、特定の ID またはクラスを持つ要素に到達するまで使用することです。それは本当にあなたが何をしたいかによって異なります。

于 2010-02-04T15:47:55.950 に答える
0

http://api.jquery.com/parent/およびhttp://api.jquery.com/parents/

$(".click-me").click(function(){
    var ancestorId = $(this).parent().parent();
    alert(ancestorId)
});

IDを含むdivを返します

于 2010-02-04T15:23:32.750 に答える