如何检查jQuery元素的内容

Question

I'm trying to learn some jquery. In my html page I have something like this:

<li>
    <ul>
       <p>This ul has text</p>
    </ul>
</li>

<li>
    <ul></ul>
</li>

I'm trying to do something if the tag 'ul' doesn't have any content

var $ul = $li.find(' > ul')
if( $ul.text() == null || $ul.text == ""){
    alert("Empty ul");
}else{ 
    alert("Not empty ul");
}

I get the alert with "not empty ul" everytime, so the if-statement is never true.

How can I check correctly if there is nothing inside the 'ul' tags?

Answer 1

You can use :empty

$('ul:empty').each(

If you want to check ul that only have spaces between them then you can use filter and trim to get ul

$('ul').filter(function(){
   rturn $.trim($(this).text()) == "";
});

Answer 2

You can use :empty selector

var $ul = $li.find(' > ul')
if( $ul.is(':empty')){
    alert("Empty ul");
}else{ 
    alert("Not empty ul");
}

Answer 3

In the if statement, $ul.text should have parenthesis and be $ul.text() :

if( $ul.text() == null || $ul.text() == ""){

You might also want to trim it, if there could be whitespace:

if( $ul.text() == null || $.trim($ul.text()) == ""){

Or use the :empty selector in combination with .is() :

if($ul.is(':empty')){

Answer 4

Try this:

$('ul:empty').each(function(){ 
   //-- Do your stuff
});

Working Example