开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法。
HTML片断:
<ul class="box"> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> </ul>
先说说jquery的解决方案:
//获取li内容 function getLi(obj,index){ var child = obj.children("li").eq(index); return child.html(); } $(function(){ var c = 0; $(".box").click(function(){ if(c == 0){ console.log(getLi($(this),c)); c++; }else if(c == 1){ console.log(getLi($(this),c)); c++; }else if(c == 2){ console.log(getLi($(this),c)); c++; }else if(c == 3){ console.log(getLi($(this),c)); c++; }else if(c == 4){ console.log(getLi($(this),c)); c = 0; } }); });
$("elementName").children();获取当前对象的子元素(集合),若子元素有且只有一个就直接通过children()获取。若子元素有多个children()获取的就是一个集合,获取具体一个子元素就需要eq();获取。
再来看看JavaScript的解决方案:
var c = 0; var childArr = document.getElementsByClassName("box")[0].getElementsByTagName("li"); document.getElementsByClassName("box")[0].onclick = function(){ if(c == 0){ console.log(childArr[c].innerHTML); c++; }else if(c == 1){ console.log(childArr[c].innerHTML); c++; }else if(c == 2){ console.log(childArr[c].innerHTML); c++; }else if(c == 3){ console.log(childArr[c].innerHTML); c++; }else if(c == 4){ console.log(childArr[c].innerHTML); c = 0; } }
JS获取子元素用链式调用,DOM.getElement.._Parent.getElement.._Child;(dom.父元素.子元素)。
小结:个人觉得js的调用方式比jquery方便,通过链式调用便可获取元素子集。