要素が親の子であるかどうかを確認する

115

次のコードがあります。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<div id="hello">Hello <div>Child-Of-Hello</div></div>
<br />
<div id="goodbye">Goodbye <div>Child-Of-Goodbye</div></div>

<script type="text/javascript">
<!--
function fun(evt) {
    var target = $(evt.target);    
    if ($('div#hello').parents(target).length) {
        alert('Your clicked element is having div#hello as parent');
    }
}
$(document).bind('click', fun);
-->
</script>

</html>

Child-Of-Helloクリックされたときだけ期待し、$('div#hello').parents(target).length> 0を返します。

ただし、どこかをクリックすると必ず発生します。

コードに問題がありますか？

javascript jquery

— Cheok Yan Cheng
ソース

160

直接の親だけに関心があり、他の祖先には関心がない場合は、を使用してparent()、のようにセレクターを与えることができますtarget.parent('div#hello')。

例： http : //jsfiddle.net/6BX9n/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parent('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

または、一致する祖先があるかどうかを確認する場合は、を使用します.parents()。

例： http : //jsfiddle.net/6BX9n/1/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parents('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

— user113716
ソース

19

jqueryなしでそれを行う方法？

— SuperUberDuper 2015

60

.has()この目的のために設計されているようです。jQueryオブジェクトを返すので、次のこともテストする必要があり.lengthます。

if ($('div#hello').has(target).length) {
   alert('Target is a child of #hello');
}

— ブレイズモンガー
ソース

@redanimalwarそうです。それがこれです。親要素を見つけ、そのtarget中にあるかどうかを確認します。

— Blazemonger 2017

22

IE8 +用のバニラ1ライナー：

parent !== child && parent.contains(child);

ここでは、それがどのように機能するか：

function contains(parent, child) {
  return parent !== child && parent.contains(child);
}

var parentEl = document.querySelector('#parent'),
    childEl = document.querySelector('#child')
    
if (contains(parentEl, childEl)) {
  document.querySelector('#result').innerText = 'I confirm, that child is within parent el';
}

if (!contains(childEl, parentEl)) {
  document.querySelector('#result').innerText += ' and parent is not within child';
}

<div id="parent">
  <div>
    <table>
      <tr>
        <td><span id="child"></span></td>
      </tr>
    </table>
  </div>
</div>
<div id="result"></div>

スニペットを展開

— アレクサンドル・マコフ
ソース

ありがとう、それはかなり素晴らしいです！再帰はクールです。関数の引数が関数の操作対象（内部）になる方法を知りたいのですが。その詳細情報へのリンクがありますか？

— JohnK

20

特定のセレクターがない要素があり、それが別の要素の子孫であるかどうかを確認したい場合は、jQuery.contains（）を使用できます。

jQuery.contains（container、contains）
説明：DOM要素が別のDOM要素の子孫であるかどうかを確認します。

親要素とチェックしたい要素をその関数に渡すと、後者が最初の子孫である場合に返されます。

— Naitsirch
ソース

3

jQueryインスタンスではなく$.contains DOM要素の取得に特に注意してください。そうしないと、常にfalseが返されます。

— aleclarson 2017

覚えておくべきもう1つの詳細：$.contains2つの引数が同じ要素である場合は、trueを返しません。それが必要な場合は、を使用してくださいdomElement.contains(domElement)。

— aleclarson 2017

9

代わりに.closest（）を使用してしまいました。

$(document).on("click", function (event) {
    if($(event.target).closest(".CustomControllerMainDiv").length == 1)
    alert('element is a child of the custom controller')
});

— ルーカス
ソース

3

2つの用語を交換するだけで、コードを機能させることができます。

if ($(target).parents('div#hello').length) {

あなたは子供と親に間違った方法で回らせました。

— tttppp
ソース

2

var target = $(evt.target);だからあなたのコードは読むべきで、読むべきではif (target.parents('div#hello').length) {ありません...$(target)...

— Peter Ajtai

0

他の回答に加えて、このあまり知られていない方法を使用して、特定の親の要素をそのように取得できます。

$('child', 'parent');

あなたの場合、それは

if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);

子と親の間のカンマの使用とそれらの別々の引用符に注意してください。同じ引用符で囲まれていた場合

$('child, parent');

ドキュメントツリーに存在するかどうかに関係なく、両方のオブジェクトを含むオブジェクトができます。

— 答えが欲しい
ソース

これはクールなハックですが、IDやクラスのない要素ではうまく機能しません

— aln447