读书人

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

发布时间: 2013-03-14 10:33:15 作者: rapoo

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>


请问如何用JS获取所有LI中第三个<SPAN>里隐藏的内容
[解决办法]

<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>

读书人网 >JavaScript

热点推荐