JQuery中判断元素中是否有内容

网页中html代码如下:

 
 
<style type="text/css"> 
*{ margin:0; padding:0; font-size:12px;}  
body{ background:#EEE;}  
a{ color:#666;}  
li{ list-style:none;}  
ul{ width:500px; height:230px; background:#fff; margin:50px auto;}  
ul li{ width:500px; height:auto; overflow:hidden; margin-bottom:5px;}  
ul li span{ display:block; float:left; width:100px; height:20px;}  
</style> 
 
<ul> 
       <li><span><a href="#">【专题】</a></span><a href="#">2005年超女王贝因整形意外身亡</a></li> 
       <li><span><a href="#"></a></span><a href="#">2005年超女王贝因整形意外身亡</a></li> 
</ul> 

让<span><a href="#"></a></span>这个结构中有文字的显示一种颜色，没有文字的显示另一种颜色的JQ代码如下：

 
 
<script type="text/javascript"> 
$(function(){  
       $("ul li span").each(function(){  
              if($(this).find("a:eq(0)").text()==""){  
                     $(this).css("background","blue");  
              }else{  
                     $(this).css("background","red");  
              }                  
       });                                 
});  
</script>