Javascript jQuery; 检查对象是否有子 $(this)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6530739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery; Check if object has child $(this)
提问by user822448
I wonder how I in the best way can see if a container div contains a child element. I have a click event that fires on a child of either div id=unread or div id=read. I want to check where this child is.
我想知道如何以最佳方式查看容器 div 是否包含子元素。我有一个点击事件，它会在 div id=unread 或 div id=read 的子节点上触发。我想看看这个孩子在哪里。
Something like this is what I'm thinking:
我在想这样的事情：
if ($("#unread").find($(this)))
alert("unread");
else
alert("read");
Edit: $(this) is a descendants two levels from #unread or #read.
编辑：$(this) 是#unread 或#read 的两个级别的后代。
Regards
问候
回答by Pranay Rana
Make use of : .children()
利用：.children()
if( $("#unread").children().length > 0)
alert("unread");
else
alert("read");
EDIT
编辑
if($(event.target).closest('#unread').length > 0)
alert('unread');
else
alert('read');
回答by Brad Mace
I think just adding .lengthshould work:
我认为只是添加.length应该工作：
if ($("#unread").find($(this)).length > 0)
alert("unread");
else
alert("read");
回答by mu is too short
Go backwards from $(this)to look for #unreadas an ancestor using closest:
使用以下方法倒退$(this)以寻找#unread祖先closest：
if($(this).closest('#unread').length > 0)
alert('unread');
else
alert('read');
Depending on your HTML structure, this will be faster than searching all the children of #unreadto find this. The speed difference probably won't matter that much though but you should be aware of the option of going backwards and the possible benefits of doing so.
根据您的 HTML 结构，这将比搜索#unreadfind 的所有子项更快this。不过，速度差异可能并不那么重要，但您应该了解后退的选项以及这样做可能带来的好处。
Checking for the ancestor might be a better match for your intent as well: you have thisin hand and what you really want to know is "is it inside #unread?". Using closestto go back up the DOM tree exactly matches the question you're asking.
检查祖先也可能更符合您的意图：您this手头有，而您真正想知道的是“它在里面#unread吗？”。使用closest回去了DOM树正是你问的问题相匹配。
If for some reason you're dead set on starting at #unreadand looking at its descendants, then you can use find:
如果由于某种原因你死心塌地开始#unread并查看它的后代，那么你可以使用find：
if($('#unread').find(this))
alert('unread');
else
alert('read');
But this approach will only work if you're using at least jQuery 1.6.
但是这种方法只有在您至少使用 jQuery 1.6 时才有效。
回答by nnnnnn
Use .closest()or .parents()to search up the tree from the clicked element:
使用.closest()或.parents()从单击的元素向上搜索树：
if ($(this).closest("#unread").length == 1)
// etc
Otherwise, are you interested in a non-jQuery answer? Given you've said the div with the click event is exactly two levels below the "read" or "unread" divs you could just do this:
否则，您对非 jQuery 答案感兴趣吗？鉴于您已经说过带有点击事件的 div 正好比“已读”或“未读”div 低两个级别，您可以这样做：
if (this.parentNode.parentNode.id === "unread")
alert("unread");
else
alert("read");
// or just alert(this.parentNode.parentNode.id);
回答by Sean the Bean
I wonder how I in the best way can see if a container div contains a child element.
我想知道如何以最佳方式查看容器 div 是否包含子元素。
Use $.contains(), especially if performance is a concern. From the docs:
使用$.contains()，尤其是在性能是一个问题时。从文档：
jQuery.contains( container, contained )
Returns: Boolean
Description:Check to see if a DOM element is a descendant of another DOM element.
jQuery.contains( 容器, 包含 )
返回：布尔值
描述：检查一个 DOM 元素是否是另一个 DOM 元素的后代。
It's more efficient than .find(), .children(), or .closest(), as others have recommended. Be aware, however, that it only accepts DOM elements as parameters, not jQuery objects (which is part of why its performance is better).
正如其他人所推荐的那样.find()，它比,.children()或更有效.closest()。但是请注意，它只接受 DOM 元素作为参数，而不接受 jQuery 对象（这是其性能更好的部分原因）。
In your case, you could do this in your click event handler:
在您的情况下，您可以在单击事件处理程序中执行此操作：
if ($.contains($("#unread")[0], this)) {
alert("unread");
} else {
alert("read");
}
EDIT:Upon thinking about this again, it's probably more intuitive to search up from the clicked element, rather than down from the parent element, and performance wouldn't normally be a concern in a click event handler. That is, I would opt to use the .closest()method (as suggested by @nnnnnn and @mu is too short), so my click event handler would contain:
编辑：再次考虑这一点时，从单击的元素向上搜索可能更直观，而不是从父元素向下搜索，并且单击事件处理程序通常不会关注性能。也就是说，我会选择使用该.closest()方法（如@nnnnnn 所建议的，@mu 太短），因此我的点击事件处理程序将包含：
if ($(this).closest("#unread").length > 0) {
alert("unread");
} else {
alert("read");
}
