Using jQuery to see if a div has a child with a certain class

Question

I have a div #popup that is dynamically filled with several paragraphs with the class .filled-text. I'm trying to get jQuery to tell me if #popup has one of these paragraphs in it.

I have this code:

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

Any suggestions?

Are you looking only for a **child** or for any **descendant** (child, grandchild, great grandchild, etc). The question title currently says "child" but the answers appear to talk about arbitrary descendants. — hippietrail, Jan 27 '16 at 02:25
At the time I believe I was specifically looking for a child, but it's hard to remember for sure since this question is almost 4 years old. Either way, the question and answer cover both children and descendants, and there are also answers that cover specifically children and not descendants, so I'm not sure what you're trying to get at. — Samsquanch, Jan 27 '16 at 15:53
Oh it's just that when using a search engine to look for a question specifically about looking for an element with a child matching a selector this is the one it finds so I would've tweaked the question title if it were inaccurate to help other people find the right question in the future. — hippietrail, Jan 27 '16 at 22:29

score 236 · Accepted Answer · edited May 04 '17 at 16:17

236

You can use the find function:

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff

edited May 04 '17 at 16:17

Aamir

5,324
2
30
47

answered May 10 '12 at 17:23

Tejs

40,736
10
68
86

8

This actually worked as I needed it to, but for reference `if($('#popup').has('p.filled-text').length != 0) {` also works. – Samsquanch May 10 '12 at 17:35
12

No need to check for 0. 0 is a falsey in js. https://developer.mozilla.org/en-US/docs/Glossary/Falsy – РАВИ Sep 14 '15 at 04:38

score 42 · Answer 2 · edited May 11 '12 at 14:41

42

There is a hasClass function

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

edited May 11 '12 at 14:41

epascarello

204,599
20
195
236

answered May 10 '12 at 17:25

MattP

2,798
2
31
42

Christopher Ramírez · Answer 3 · 2012-05-10T17:39:30.470

11

Use the children funcion of jQuery.

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

$.children('').length will return the count of child elements which match the selector.

edited May 10 '12 at 17:39

answered May 10 '12 at 17:25

Christopher Ramírez

1,710
10
13

1

`.size()` returns the same as the `.length` property but is slower, so you should replace that. – Johannes Klauß May 10 '12 at 17:28
Thanks Johnnes for pointing me that out! I didn't know it. Answare updated! – Christopher Ramírez May 10 '12 at 17:30
You're welcome, but there is still a mistake. It's `.length` not `.length()` – Johannes Klauß May 10 '12 at 17:35
:P I thought it was a function like most jQuery interfaces. Kind of inconsistency I think. But well, answare updated once again :P Thanks Johannes. – Christopher Ramírez May 10 '12 at 17:39
1

The `.length` property is not part of the jQuery library, it's just native javascript. But yes, it can be confusing sometimes. – Johannes Klauß May 10 '12 at 17:44
"The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree." – Richard Jan 12 '17 at 09:08

score 5 · Answer 4 · answered May 08 '14 at 06:20

5

Simple Way

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

answered May 08 '14 at 06:20

Hitesh Modha

2,740
5
28
47

2

The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call. – Hitesh Modha May 24 '14 at 11:52

score 4 · Answer 5 · answered Oct 15 '21 at 12:59

if you have multiple divs with same class and some only have that class you must check each one:

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

score 1 · Answer 6 · answered May 10 '12 at 17:24

1

If it's a direct child you can do as below if it could be nested deeper remove the >

$("#text-field").keydown(function(event) {
    if($('#popup>p.filled-text').length !== 0) {
        console.log("Found");
     }
});

answered May 10 '12 at 17:24

Rune FS

21,497
7
62
96

score 0 · Answer 7 · answered Sep 07 '22 at 21:34

In the 10 years since you've asked this question, jQuery has added almost exactly the .has( function that you described above. It filters the selector it's called on -- and it's faster than using $('.child').parent('.parent') and potentially running all the way up the DOM.

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

score 0 · Answer 8 · edited Oct 21 '22 at 15:23

0

$('.classone')

.find('p .classtwo') give the child element=p
.has('p .classtwo') give the '.classone' element

edited Oct 21 '22 at 15:23

Tyler2P

2,324
26
22
31

answered Oct 19 '22 at 12:59

Mehdi

1

score 0 · Answer 9 · answered Nov 11 '22 at 17:42

Here's a nice way to do it

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

You can also use ">" if (".your_class") is the only child of the parent ("#your_id") or the first child of the parent ("#your_id")

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

("#your_id") is the parent class or id.
(".your_class") is the class or id you're looking for.

Using jQuery to see if a div has a child with a certain class

9 Answers9

Linked