web-dev-qa-db-ja.com

jQuery select ancestor

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)
});
jqueryjquery-selectorsancestor
30
jerome

直接の親要素に対して 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()は祖先のみを返します。多くの場合、現在の要素を返す可能性を望んでいません。 closest()も1つの要素のみを返します。 parents()は、一致するすべての要素を返します。

44
Ryan McGeary

このような意味ですか？

$('.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）が一致の場合は、それが返されることに注意してください。

これがお役に立てば幸いです。

11
user113716

おそらくセレクターと組み合わせてparents（）またはclosest（）を使用して、どの祖先が一致するかを決定してみてください。たとえば、IDを持つ最も近い祖先divを見つけます。

$('.click-me').click( function() {
      var ancestorId = $(this).closest('div[id]');
      alert(ancestorId);
});
2
tvanfosson

それは本当にあなたが何を達成したいかによります。使用するクラスに関係なく、すべての祖先を検索しますか？または、祖先であり、特定のクラス（この場合はancestor-x）を持つすべての要素を検索しますか？

祖先を循環させたい場合は、 。parent（） （すべての要素を循環させる優れた例があります）または 。parents（） を使用するだけです。お気に入り：

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

おそらく最善のアプローチは、特定のIDまたはクラスを持つ要素に到達するまで.parents()を使用することです。それは本当にあなたが何をしたいかに依存します。

0
Ondrej Slinták

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

0
Teja Kantamneni

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

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

iDを持つdivを返します

0
harpax