zoukankan      html  css  js  c++  java
  • [转]原生JS-查找相邻的元素-siblings方法的实现

      在针对element的操作里,查找附近的元素是一个不可少的过程,比如在实现tab时,其中的一个div增加了“on”class,其他的去除“on”class。如果用jquery的朋友就肯定不会陌生siblings,这个非常的好用,本文针对这个方法的实现进行分析和解剖。

      身为一个菜鸟,我们很容易忽视了element的previousSibling 和 nextSibling 属性,previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级),nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。现在知道思路了吧,前提是要了解这两个属性,那么思路就很简单了,就是利用previousSibling 和 nextSibling,找到元素前面的元素和后面的元素。但是这里还要注意一个问题,那就是元素的nodeType,毕竟我们不想找y一些文本节点和属性节点,所以”nodeType ===1″ 作为判断条件。

      源码如下:

    var siblingElem = function(elem){
            var _nodes = []
                ,_elem = elem
            ;
            while ((elem = elem.previousSibling)){
                if(elem.nodeType === 1){
                    _nodes.push(elem);
                    break;
                }
            }
    
            elem = _elem;
            while ((elem = elem.nextSibling)){
                if(elem.nodeType === 1){
                    _nodes.push(elem);
                    break;
                }
            }
    
            return _nodes;
        }

      使用可以这样子:

    var dy = document.getElementById('dy');
    var sib = siblingElem(dy);

      sib得到的就是 dy的附近的元素了。
      是不是很简单,jquery中的siblings还有很多复杂的操作,但是实现的原理是类似的。

      来自 http://www.subying.com/archives/46.html ---subying's blog

  • 相关阅读:
    SQL*PLUS命令的使用大全
    Oracle总结
    SQL*PLUS命令的使用大全
    Java经典面试题
    学习Java的30个基本概念
    Java经典面试题
    学习Java的30个基本概念
    Oracle总结
    ORACLE大数据量下的分页解决方法
    XAMPP修改80和443端口及创建虚拟目录
  • 原文地址:https://www.cnblogs.com/subying/p/3650934.html
Copyright © 2011-2022 走看看