获取兄弟元素节点系列方法

获取上一个哥哥元素节点:prev

//首先获取当前元素的上一个哥哥节点,判断是否为元素节点,不是的话基于当前的继续找上面的哥哥节点。。。一直找到哥哥元素节点为止,如果没有哥哥元素节点,返回null即可。

var flag="getComputedStyle" in window;
//判断是标准浏览器还是IE6-8,返回true,为标准浏览器,返回false为IE6-8。为了兼容性

function prev(curEle){
   if(flag){
       return curEle.previousElementSibling;
   }
   var pre=curEle.previousSibling;
   while(pre && pre.nodeType !==1){
        pre=pre.previousSibling;
   }
   return pre;
}

获取下一个弟弟元素节点:next

function next(curEle){
   if(falg){
       return curEle.nextElementSibling;
   }
   var nex=curEle.nextSibling;
   while(nex && nex.nodeType !==1){
        nex=nex.nextSibling;
   }
   return nex;
}

获取所有的哥哥元素节点:prevAll

function prevAll(curEle){
   var ary=[];
   var pre=prev(curEle);//调用获取上一个哥哥元素节点函数prev()
   while(pre){//如果存在,继续往上找
      ary.unshift(pre);//找到的每一项都插在数组第一项
      pre=prev(pre);
   }
   return ary;
}

获取所有的弟弟元素节点:nextAll

function nextAll(curEle){
   var ary=[];
   var nex=next(curEle);
   while(nex){
      ary.push(nex);
      nex=next(nex);
   }
   return ary;
}

获取相邻的两个元素节点:sibling

function sibling(curEle){
    var pre=prev(curELe);
    var nex=next(curEle);
    var ary=[];
    pre?ary.push(pre):null;
    nex?ary.push(nex):null;
    return ary;
}

获取所有的兄弟元素节点:siblings

function siblings(curEle){
    return prevAll(curEle).concat(nextAll(curEle));//把两个数组拼接到一起
}

获取当前元素的索引:index

function index(curEle){
    return prevAll(curEle).length;
}

获取第一个元素子节点:firstChild

function firstChild(curEle){
    var chs=children(curEle);//children()方法是获取所有元素子节点
    return chs.length>0?chs[0]:null;
}

获取最后一个元素子节点:lastChild

function lastChild(curEle){
    var chs=children(curEle);
    return chs.length>0?chs[chs.length-1]:null;
}

推荐阅读更多精彩内容