当前位置:首 页 > 技术文章 > 转载 > 详细

一个获取第n个元素节点的js函数

字号字号

摘要: 这篇文章主要介绍了一个获取第n个元素节点的js函数,功能还不完善,需要的朋友可以参考下 一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善演示:htmlview sourceprint? 1 <ul……

  这篇文章主要介绍了一个获取第n个元素节点的js函数,功能还不完善,需要的朋友可以参考下

  一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善

演示:html

1 <ul id="list">
2 <li>1<button>a</button></li>
3 <li>2<button>b</button><button>o</button></li>
4 <p>test</p>
5 <li>3<button>c</button></li>
6 <li>4<button>d</button></li>
7 <li>5<button>e</button></li>
8 </ul>

js:

01 /**
02 *
03 * @param parent父节点
04 * @param ele要选取的元素标签
05 * @param num第几个元素
06 * @return {*}
07 */
08 function nth(parent,ele,num){
09 var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];
10 //将父节点的子节点转换成数组_ele;eleArray为只储存元素节点的数组
11 for(var i= 0,len=_ele.length;i<len;i++){
12 if(_ele[i].nodeType==1){
13 eleArray.push(_ele[i]);//过滤掉非元素节点
14 }
15 }
16 if(arguments.length===2){
17 //如果只传入2个参数,则如果第二个参数是数字,则选取父节点下的第几个元素
18 //如果第二个参数是字符串,则选取父节点下的所有参数代表的节点
19 if(typeof arguments[1]==="string"){
20 _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));
21 return _ele;
22 }else if(typeof arguments[1]==="number"){
23 return eleArray[arguments[1]];
24 }
25 }else{
26 //如果参数齐全,则返回第几个某节点,索引从0开始
27 _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));
28 return _ele[num];
29 }
30 }
31 /*
32 测试
33 */
34 var list=document.getElementById("list");
35 console.log(nth(list,"li",2).innerHTML);//选取第三个li元素
36 console.log(nth(list,"button",3).innerHTML)//选取第四个按钮
37 console.log(nth(nth(list,"li",1),"button",1).innerHTML);//选取第二个li下的第二个按钮
38 console.log(nth(nth(list,"li",1),"button"));//选取第二个li下的所有按钮
39 console.log(nth(list,2));//选取第二个元素
  • 添加[Admin-3]
  • 浏览[1821]
  • ▼评论[0]
这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]