检查元素是否包含特定的子元素答案

【问题标题】：Check if an element contains a specific child element检查元素是否包含特定的子元素
【发布时间】：2013-07-31 23:24:15
【问题描述】：

我有很多divs，其中有时包含链接。我想检查他们是否有链接。这是我的尝试：

var container = $(this).closest('.content').find('.text');

    //Check if text contains a tags
    if(container+':has(a)'){
        alert('contain link'); 
    }
    else{
        alert('no link found');  //Alert "contain link" even if no link is found.
    }

通过container.html()，我可以看到container的确切内容，包括锚标签，但我上面的代码总是说找不到锚标签。

谁能告诉我我做错了什么？

【问题讨论】：

container+':has(a)' 您认为将+ 运算符应用于对象和字符串的操作数会产生什么结果？

标签： javascript jquery html dom jquery-selectors

【解决方案1】：

改成这样：

if(container.find("a").length){ ...

container 是一个 jquery 对象，.find() 是该对象的一个函数，用于查找其中的元素。大于 0 的长度意味着它找到了一个锚标记，它会评估为真。

编辑：

另外，解释为什么您的示例不起作用。当您执行container+':has(a)' 时，您正在执行一个字符串连接，它在您的对象上运行toString()（将其转换为“[object Object]”）。所以你最终会得到字符串“[object Object]:has(a)”，它总是评估为真。

【讨论】：

好点。不应将字符串与对象连接起来。它只是行不通。谢谢

【解决方案2】：

您可以使用选择器的length 属性来确定是否找到了任何元素。试试这个：

var $container = $(this).closest('.content').find('.text');

if ($('a', $container).length) {
    alert('Contains links'); 
}
else {
    alert('No links found');
}

【讨论】：

【解决方案3】：

改变

if(container+':has(a)'){

到

if(container.has('a').size()){

容器是一个 jquery 对象，而不是选择器字符串

【讨论】：

这不起作用 - has() 实际上会返回一个容器的 jquery 对象子集，无论它是否包含元素 - jsfiddle.net/7V3Hy/3
刚刚意识到'has'方法返回jquery对象，很多

【解决方案4】：

如果您将其更改为，您的将起作用

 if($(container+":has(a)").length > 0){

In docs

提供的选择器针对匹配元素的后代进行测试

【讨论】：

这也不起作用，当您尝试将容器与字符串连接时，它会将容器从 jquery 对象转换为字符串（“[object Object]”），然后您将获得语法当您尝试从中创建 jquery 时出错。这会起作用：container.has("a").length，但没有理由检查 >0 是否会评估为 0 并且任何其他结果会评估为 true。