检查元素是否在jQuery中包含另一个元素答案

【问题标题】：Check if element contains another one in jQuery检查元素是否在jQuery中包含另一个元素
【发布时间】：2012-11-01 17:58:47
【问题描述】：

我在 Stack Overflow 上发现了很多相关的东西，但不适用于我的案例。

都在这个例子中，我需要检查一个元素是否包含另一个元素，如果是，则附加一些东西。

$(".bt_repondre").click(function(){
    comment = $(this).parent().parent().parent();
    //I want to check if comment contains a .comment_full element, if no, append.
    comment.append('add');
});

希望你能帮助我，我尝试了很多东西......

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

您可以使用.has 和.length：

if (comment.has('.comment_full').length) {
    // It has that element
}

.find 将遍历所有后代，但一旦找到与选择器匹配的后代，.has 将停止。它可能会运行得更快。
.length 只是检查结果元素集的长度是否非零。

【讨论】：

【解决方案2】：

只需使用.find() 并检查是否返回一个元素，如下所示：

$(".bt_repondre").click(function(){
    comment = $(this).parent().parent().parent();
    if (! comment.find('.comment_full').length) {
       comment.append('add');
    }
});

【讨论】：

@Jean-François 你真的应该看看 Blender 的回答！比这个简洁一点
PS：不要使用.parent().parent().parent()。使用.closest(".someSelector")
.parent().parent().parent() 你可以使用 parentsUntil("some_selector")

【解决方案3】：

这些答案大多不正确。您必须传递一个 DOM 节点而不是 jQuery 元素，$.contains 才能根据https://api.jquery.com/jQuery.contains/ 正常工作。

例如，这就是您确定$('#a') 是否包含$('#b) 的方法。

HTML：

<div id="a">
  <div id="b"></div>
</div>

JavaScript：

var $a = $('#a');
var $b = $('#b');
var contains = $.contains($a.get(0), $b.get(0));
console.log('contains', contains);
// outputs `true`

【讨论】：

【解决方案4】：

这些答案中的大多数都很棒，但是有一个 new method called contains(container,contained)（在 1.4 中添加）返回一个 Boolean！它与 Blender 的代码 sn-p 基本相同，但可能更快，无论是输入还是执行。

在您的代码中实现，如下所示：

$(".bt_repondre").click(function(){
    comment = $(this).parent().parent().parent();
    if(!$.contains(comment, $('.comment_full')))//same as if(!jQuery.contains(...
    {
        comment.append('add');
    }
});

【讨论】：

【解决方案5】：

如果您正在查看，假设表中任何 tr 元素的 id 为 myTable，您可以使用以下代码：

if($('#productsTableBody tr').length)
{
//...
}

这样我们可以检查表是否包含任何行。

【讨论】：

【解决方案6】：

试试这个

 comment.has('a.comment_full').length == 0

【讨论】：

这不会告诉你它是否不包含其他元素吗？

【解决方案7】：

这对我来说是这样的：

$(window).click(function(e) {
    // if popup is visible
    if($('.assignment_popup:visible').length) {
        
        popup_id = $('.assignment_popup:visible').attr('id');

        // if user clicked on popup itself or on something inside popup then do nothing
        if($(e.target).hasClass('open-popup') || $(e.target).hasClass('assignment_popup')) {
            return;
        }

        // if clicked element is not inside the popup then close the popup
        if(!$('#' + popup_id).find(e.target).length) {
            $('#' + popup_id).fadeOut(500);
        }
    }
        
    //console.log(e.target);
});

【讨论】：