Che*_*eng 110 javascript jquery
我有以下代码.
<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.
但是,只要我点击任何地方,它就会发生.
我的代码有问题吗？
use*_*716 150
如果你只对直接父,而不是其他祖先感兴趣,你可以使用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');
}
}
Bla*_*ger 52
.has()似乎是为此目的而设计的.由于它返回一个jQuery对象,你还必须测试.length:
if ($('div#hello').has(target).length) {
alert('Target is a child of #hello');
}
nai*_*rch 18
如果你有一个没有特定选择器的元素,你仍然想检查它是否是另一个元素的后代,你可以使用jQuery.contains()
jQuery.contains(container,contained)
描述:检查DOM元素是否是另一个DOM元素的后代.
您可以将父元素和要检查的元素传递给该函数,如果后者是第一个函数的后代,则返回它.
Ale*_*kov 15
适用于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>结束使用.closest()代替.
$(document).on("click", function (event) {
if($(event.target).closest(".CustomControllerMainDiv").length == 1)
alert('element is a child of the custom controller')
});
target.matches()和:scope如果您想查看目标元素是否具有与某个选择器匹配的父元素，请使用目标上的.matches() 方法并传递选择器，后跟:scope伪类。
这里:scope引用目标元素，因此您可以在:where伪类中使用来帮助您编写干净的选择器。
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()如果您有兴趣查看目标元素是否是特定元素的子元素，请使用.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>只需交换这两个术语即可使代码正常工作：
if ($(target).parents('div#hello').length) {
你让孩子和家长走错了路。
| 归档时间： |
|
| 查看次数： |
119750 次 |
| 最近记录： |