js怎样知道 <li>标签下是否有ul标签呀

JavaScript023

js怎样知道 <li>标签下是否有ul标签呀,第1张

假定li标签已提取到变量li中:

var ul=li.getElementsByTagName("ul")

if(ul.length){

//这个li中有ul

}else{

//这个li中没有ul

}

给ul加一个唯一标识,一般用ID然后用document.getElementById(刚刚给ul设置的ID)定位到ul再用Object.childNodes获取此ul下的所有li,返回的是一个存有li对象的数组有效下标为0~(你的li数量-1)之后就可以随意操作了给你写个简单例子吧,还有不懂可以Q我<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function test(){

var but = arguments[0]

var UL = document.getElementById("test")

var LI = UL.childNodes

var now = parseInt(but.name)

if(but.value == "Li总数量"){

alert(LI.length)

but.value = "下一个Li"

but.name = 0

}else{

if(now <LI.length){

alert(LI[now].innerHTML)

but.name = now+1

if(now == LI.length-1){ but.value = "Li总数量"but.name = 0}

}

}

}

</script>

</head><body>

<ul id="test">

<li>我是第一个li</li>

<li>我是第二个li</li>

<li>我是第三个li</li>

<li>我是第四个li</li>

<li>我是第五个li</li>

<li>我是第六个li</li>

</ul>

<input type="button" value="Li总数量" onclick = "test(this)"/>

</body>

</html>

整体思路:可以用for循环去遍历<ul>下的所有<li>;然后对比鼠标悬浮时对应的li元素,输出当前的i,也就是对应li的下标。

html代码部分:

新建一个ul无序列表,并赋予id值,如:

<ul class="UL" id="UL">

<li>1111111</li>

<li>2222222</li>

<li>3333333</li>

<li>4444444</li>

</ul>

css部分:

接下来是对无序列表做一下简单的样式,便于后期测试悬浮效果;给li设置一下宽度以及设置一下边框,如:

.UL{display:block width:100px text-align:center margin:20px auto}

.UL li{display:block line-height:30px cursor:pointer border:1px dashed red}

最后是JS代码部分:

//定义ul的悬浮函数

document.getElementById("UL").onmouseover = function(e){

var target = e.target    //获取对应目标元素

var children = this.children   //获取ul里面的所有li元素集合

for(i = 0i<children.lengthi++){

if(target == children[i]) { //对比目标元素和li集合元素

     alert("目标元素的下标为:" + i)    //输出目标元素的下标

return

}

}

}

最后用浏览器打开该html文件,鼠标悬浮到li上面的时候,就会输出对应li的下标,比如鼠标覆盖在第3个li上面,即 <li>3333333</li>上面时,效果图如下: