使用jQuery检测div内的元素

Question

What is the best way in your experience to detect the existence of an element inside a div?

I'm currently using this:

if (($('.parentDiv').width()) > 0){
    //Do something
}

There has to be a more elegant way.

Answer 1

If empty means not even text nodes:

if ($('.parentDiv').contents().length){
    //Do stuff      
}

or:

$('.parentDiv:not(:empty)') // which is nice...

.contents docs :

Description: Get the children of each element in the set of matched elements, including text and comment nodes.

if you care only of elements and not text nodes:

if ($('.parentDiv').children().length){
    //Do stuff      
}

Answer 2

Probably not what you want, but considering there's at least a little confusing over your requirements, you could consider if anything at all is within the container: elements, text, whatever.

Say you have an empty div:

<div class="parentDiv"></div>​

Then $(".parentDiv").html().length == 0 indicates its emptiness.

If the div is not empty:

<div class="parentDiv"> </div>​
<div class="parentDiv"><div></div></div>​

Then $(".parentDiv").html().length will indicate its occupiedness (returning 1 and 11, respectively, in those scenarios.)

If you wish to check only for elements, or specific elements, then $(".parentDiv").children() would be the way to go.

Answer 3

Assuming you only care about elements (and not text nodes), you could check to see if the element has any children :

if($('.parentDiv').children().length) {
    //Do stuff
}

Answer 4

使用children()函数

$('.parentDiv').children()

Answer 5

if ( $( '.parentDiv' ).children().length > 0 )
{
     // do something
}