使用jQuery查看一个div是否有某个类的子元素

142

我有一个

#popup
,其中动态填充了几个类为.filled-text的段落。我试图让jQuery告诉我#popup中是否有这些段落之一。

我有以下代码:

$("#text-field").keydown(function(event) {
    if($('#popup').has('p.filled-text')) {
        console.log("Found");
     }
});

有什么建议吗?


1
你是只在寻找一个子代还是任何后代(子女、孙子、曾孙等)?问题标题目前说的是“子代”,但回答似乎涉及到任意后代。 - hippietrail
当时我相信我特别在寻找一个孩子,但是很难确定,因为这个问题已经有将近4年的时间了。无论如何,这个问题和答案都涵盖了孩子和后代,也有一些答案专门涉及孩子而不是后代,所以我不确定你想要表达什么。 - Samsquanch
哦,问题就是当使用搜索引擎特别是关于查找具有与选择器匹配的子元素的问题时,它找到了这个问题。因此,如果标题不准确,我将调整问题标题以帮助其他人在将来找到正确的问题。 - hippietrail
9个回答

236
你可以使用 find 函数:
if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff

8
这个确实按照我的需求运作了,但是供参考的是 if($('#popup').has('p.filled-text').length != 0) { 也可以工作。 - Samsquanch
12
JS中无需检查0。0在JS中为假值(falsy)。 - РАВИ

42

有一个hasClass函数。

if($('#popup p').hasClass('filled-text'))

11
使用jQuery的children函数。
$("#text-field").keydown(function(event) {
    if($('#popup').children('p.filled-text').length > 0) {
        console.log("Found");
     }
});

"

$.children('').length会返回与选择器匹配的子元素的数量。

"

1
.size() 返回的结果与 .length 属性相同,但速度较慢,因此应该替换为后者。 - Johannes Klauß
谢谢Johnnes指出这个问题!我之前不知道。答案已更新! - Christopher Ramírez
不用谢,但还是有一个错误。应该是.length而不是.length() - Johannes Klauß
我以为它像大多数jQuery接口一样是一个函数。有点不一致,我想。但好吧,答案再次更新了:P谢谢Johannes。 - Christopher Ramírez
1
.length 属性不是 jQuery 库的一部分,它只是原生 JavaScript。但有时确实会让人感到困惑。 - Johannes Klauß
".find()和.children()方法类似,不同的是后者只会沿着DOM树向下遍历单个级别。" - Richard

5

简单的方法

if ($('#text-field > p.filled-text').length != 0)

2
.size()方法在功能上等同于.length属性;但是,.length属性更受欢迎,因为它没有函数调用的开销。 - Hitesh Modha

4

如果您有多个具有相同类别的

标签,并且其中一些仅具有该类别,则必须逐个检查每个标签:

            $('.popup').each(function() {
                if ($(this).find('p.filled-text').length !== 0) {
                    $(this).addClass('this-popup-has-filled-text');
                }
            });

1

$('.classone')

  • .find('p .classtwo') 给出子元素=p
  • .has('p .classtwo') 给出 '.classone' 元素

1
如果它是直接子元素,您可以按照以下方式操作,如果它可能嵌套更深,请删除 >。
$("#text-field").keydown(function(event) {
    if($('#popup>p.filled-text').length !== 0) {
        console.log("Found");
     }
});

0
在您提出这个问题的10年中,jQuery几乎完全添加了您上面描述的.has(函数。它过滤被调用的选择器--而且比使用$('.child').parent('.parent')并可能一直运行到DOM更快。
$("#text-field").keydown(function(event) {
    if($('#popup').has('p.filled-text').length) {
        console.log("Found");
    }
});

0

这是一个不错的方法

if($("#your_id .your_class")) { 
   //Do something
});

如果(".your_class")是父元素("#your_id")的唯一子元素或者是父元素("#your_id")的第一个子元素,你也可以使用">"。

if($("#your_id>.your_class")) { 
   //Do something
});

("#your_id") 是父类或 ID。
(".your_class") 是你要查找的类或 ID。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接