142

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?

Samsquanch
  • 8,866
  • 12
  • 50
  • 89
  • 1
    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

9 Answers9

236

You can use the find function:

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff
Aamir
  • 5,324
  • 2
  • 30
  • 47
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
42

There is a hasClass function

if($('#popup p').hasClass('filled-text'))
epascarello
  • 204,599
  • 20
  • 195
  • 236
MattP
  • 2,798
  • 2
  • 31
  • 42
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.

Christopher Ramírez
  • 1,710
  • 10
  • 13
5

Simple Way

if ($('#text-field > p.filled-text').length != 0)
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
4

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');
                }
            });
Vince Verhoeven
  • 1,693
  • 14
  • 25
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");
     }
});
Rune FS
  • 21,497
  • 7
  • 62
  • 96
0

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");
    }
});
Ryan Taylor
  • 12,559
  • 2
  • 39
  • 34
0

$('.classone')

  • .find('p .classtwo') give the child element=p
  • .has('p .classtwo') give the '.classone' element
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
0

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.

Dexter
  • 74
  • 8