요소가 부모의 자식인지 확인

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

— 청 얀
소스

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

60

.has()이 목적을 위해 설계된 것 같습니다. jQuery 객체를 반환하므로 다음 사항도 테스트해야합니다 .length.

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

— 블레이즈 몽거
소스

@redanimalwar 맞아; 그것이하는 일입니다. 부모 요소를 찾은 다음 그 target안에 있는지 확인 합니다.

— Blazemonger

22

IE8 + 용 Vanilla 1-liner :

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, included)
설명 : DOM 요소가 다른 DOM 요소의 자손인지 확인합니다.

부모 요소와 확인하려는 요소를 해당 함수에 전달할 수 있으며 후자가 첫 번째의 후손이면 반환됩니다.

— Naitsirch
소스

3

jQuery 인스턴스가 아닌$.contains DOM 요소 를 사용 하는 데 특히주의하십시오. 그렇지 않으면 항상 false를 반환합니다.

— aleclarson

기억해야 할 또 다른 세부 사항 : $.contains두 인수가 동일한 요소이면 절대로 true를 반환하지 않습니다. 원하는 경우 domElement.contains(domElement).

— aleclarson jul.

9

대신 .closest ()를 사용했습니다.

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

— 루카스
소스

3

두 용어를 바꾸면 코드가 작동하도록 할 수 있습니다.

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

당신은 아이와 부모가 잘못된 길을 가졌습니다.

— tttppp
소스

2

var target = $(evt.target);그래서 당신의 코드를 읽어야 if (target.parents('div#hello').length) {하지...$(target)...

— 피터 Ajtai에게

0

다른 답변 외에도이 덜 알려진 방법을 사용하여 특정 부모의 요소를 잡을 수 있습니다.

$('child', 'parent');

귀하의 경우에는

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

자식과 부모 사이에 쉼표를 사용하고 별도의 따옴표를 사용합니다. 같은 따옴표로 묶인 경우

$('child, parent');

문서 트리에 존재하는지 여부에 관계없이 두 개체를 모두 포함하는 개체가 있습니다.

— 나는 대답을 원한다
소스

이 멋진 해킹이지만, IDS없는 요소, 또는 클래스와 잘 작동하지 않습니다

— aln447