JS获取DIV中的LI,该怎么解决

JS获取DIV中的LI

<DIV class="time_lbc">
<UL id=index_tab01>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN>
  <SPAN class="jie" style="display:none">XX</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
......
</LI>
....N个LI
</UL>
</DIV>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("#abv").click(function(){
$("span:hidden").each(function(){
alert($(this).text());
});
});
})
</script>
<input type="button"  id="abv" value="测试用按钮"/>
<div class="time_lbc">
<ul id="index_tab01">
<li onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <span class="xm">XX</span>
  <span class="jie" style="display:none">XX1</span>
  <span class="list">XX</span>
  <span class="address">XX</span>
</li>
<li onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <span class="xm">XX</span>
  <span class="jie" style="display:none">XX2</span>
  <span class="list">XX</span>
  <span class="address">XX</span>
</li>
</ul>
</div>

var liUnion=document.getElementsByTags('li');
for(var i=0;i<liUnion.length;i++){
  var spanThird=liUnion[i].getElementsByTags('span')[2];
  //do something
}

<DIV class="time_lbc">
<UL id=index_tab01>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN>
  <SPAN class="jie" style="display:none">X</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN>
  <SPAN class="jie" style="display:none">XX</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN> 
 
  <SPAN class="jie" style="display:none">XXX</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
</UL>
</DIV>
<script>
    window.onload = function () {
        var lis = document.getElementById('index_tab01').getElementsByTagName('li'), sps, arr = [];
        for (var i = 0, j = lis.length; i < j; i++) {
            sps = lis[i].getElementsByTagName('span');
            if (sps.length > 2) arr[arr.length] = sps[2].innerHTML;
        }
        alert(arr.join('\n'))
    }
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<DIV class="time_lbc">
<UL id=index_tab01>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN>
  <SPAN class="jie" style="display:none">XX</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN>
  <SPAN class="jie" style="display:none">XX1</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
<LI onMouseOver="this.className='b'" onMouseOut="this.className=''">
  <span class="cx">XX</span>
  <SPAN class="xm">XX</SPAN>
  <SPAN class="jie" style="display:none">XX2</span>
  <SPAN class="list">XX</SPAN>
  <SPAN class="address">XX</SPAN>
</LI>
</UL>
</DIV>
<script type="text/javascript">
var arr = [];
//按隐藏span进行筛选
$("#index_tab01>li>span:hidden").each(function(){
    arr.push($(this).text());
});
alert(arr.join("
[解决办法]
"));

arr=[];
//按第三个span元素进行筛选
$("#index_tab01>li>span:nth-child(3)").each(function(){
    arr.push($(this).text());
});
alert(arr.join("
[解决办法]
"));

arr=[];
//按第三个span并且为隐藏的元素
$("#index_tab01>li>span:nth-child(3):hidden").each(function(){
    arr.push($(this).text());
});
alert(arr.join("
[解决办法]
"));
</script>