요소가 부모의 자식인지 확인
저는 다음과 같은 코드를 가지고 있습니다.
<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을 반환합니다.
하지만 아무 곳이나 클릭할 때마다 발생합니다.
제 코드에 무슨 문제가 있나요?
만약 당신이 다른 조상들이 아닌 직계 부모에게만 관심이 있다면, 당신은 그냥 사용할 수 있습니다.parent()그리고 그것에게 선택권을 주세요, 마치.target.parent('div#hello').
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');
}
}
.has() 이 목적을 위해 설계된 것 같습니다.jQuery 개체를 반환하므로 다음을 테스트해야 합니다..length또한:
if ($('div#hello').has(target).length) {
alert('Target is a child of #hello');
}
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>특정 선택기가 없는 요소가 있지만 다른 요소의 하위 요소인지 확인하려면 jQuery.contains()를 사용할 수 있습니다.
포함)contains(컨테이너, 포함)
: 요소의 요소인지 합니다.DOM 요소가 다른 DOM 요소의 하위 요소인지 확인합니다.
부모 요소와 확인할 요소를 해당 함수에 전달하면 후자가 첫 번째 요소의 하위인 경우 반환됩니다.
대신 .closest()를 사용하게 되었습니다.
$(document).on("click", function (event) {
if($(event.target).closest(".CustomControllerMainDiv").length == 1)
alert('element is a child of the custom controller')
});
다음 두 용어를 교환하기만 하면 코드를 작동시킬 수 있습니다.
if ($(target).parents('div#hello').length) {
당신은 아이와 부모를 잘못 돌리게 했습니다.
재쿼리 사용 안 함
target.matches()와 함께:scope
대상 요소에 일부 선택기와 일치하는 상위 요소가 있는지 확인하려면 대상에서 메서드를 사용하고 선택기와 유사 클래스를 차례로 전달합니다.
그:scope여기서는 대상 요소를 참조하므로 의사 클래스의 를 사용하여 깨끗한 선택기를 작성하는 데 도움이 됩니다.
다음 예제에서는 다음의 하위 요소인 모든 대상 요소를 일치시킵니다.a,button또는summary요소
const app = document.getElementById("app");
app.addEventListener("click", (event) => {
if (
event.target.matches(
":where(a, button, summary) :scope"
)
) {
console.log("click", event.target.parentNode.tagName);
}
});<div id="app">
<button>
<span>Click Me</span>
</button>
<a href="#">
<span>Click Me</span>
</a>
<details>
<summary>
<span>Click Me</span>
</summary>
</details>
<span>Click Me</span>
<div> " " " 를 합니다.:where(a, button, summary) :scope다음과 같이 기록될 수도 있습니다.
a :scope,
button :scope,
summary :scope
parent.contains()
대상 요소가 잠재적인 상위 요소에서 사용되는 특정 요소의 하위 요소인지 확인하려면 다음을 수행합니다.
const app = document.getElementById("app");
const button = document.getElementById("button");
app.addEventListener("click", (event) => {
if (button.contains(event.target)) {
console.log("click");
}
});<div id="app">
<button id="button">
<span>Click Me</span>
</button>
<span>Click Me</span>
<div>다른 답들 외에도, 당신은 이 덜 알려진 방법을 사용하여 특정 부모의 요소들을 그렇게 잡을 수 있습니다.
$('child', 'parent');
당신의 경우, 그것은
if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);
자식과 부모 사이에 쉼표를 사용하고 별도의 따옴표를 사용합니다.동일한 인용문으로 둘러싸인 경우
$('child, parent');
문서 트리에 개체가 있는지 여부에 관계없이 두 개체를 모두 포함하는 개체가 있습니다.
알렉산드르 마코프의 답변에 대한 자세한 배경 정보를 알고 싶다면 아래 페이지를 확인하는 것이 도움이 될 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
Node.contains()
노드 인터페이스의 contains() 메서드는 노드가 지정된 노드(노드 자체)의 하위 노드인지 여부를 나타내는 부울 값, 노드의 직접 자식(childNode) 중 하나, 자식의 직접 자식 중 하나 등을 반환합니다.
즉, 답은 은둔형 기능을 사용하지 않는 것입니다.
언급URL : https://stackoverflow.com/questions/3753634/check-if-an-element-is-a-child-of-a-parent
'programing' 카테고리의 다른 글
| printf를 사용하여 64비트 정수를 교차 플랫폼으로 인쇄 (0) | 2023.08.29 |
|---|---|
| mysql - IF 문 내에서 코드 블록을 실행하는 방법(프로시저에서는 실행하지 않음) (0) | 2023.08.29 |
| intptr_t 및 uninttr_t의 문자열 형식 (0) | 2023.08.29 |
| 잘못된 요청 활동 결과 코드 입력 (0) | 2023.08.29 |
| CSS 필터를 배경 이미지에 적용하는 방법 (0) | 2023.08.29 |