javascript下查找父节点的简单方法

<div>
       <a href="#">标题</a>
       <ul id="demo">
           <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>
               <ul>
                   <li><a href="#" onclick="selectThisItem(this)">子类一</a></li>
                   <li><a href="#" onclick="selectThisItem(this)">子类二</a></li>
               </ul>
           <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>
           <li><a href="#" onclick="selectThisItem(this)">项目</a></li>
       </ul>
</div>

上面的代码中，在点击项目或子类时，因为触发的事件一样，参数也一样，能区别用户点击的到底是“项目x”还是“子类x”，除了this.innerHTML来判断它们的内在文字外，还可以根据它们在以<ul id="demo">元素为根节点的xml文档中的纵向位置(节点深度)来区别，比如“项目一”在<ul id="demo">中的节点深度是2，“子类一”的节点深度是4.

计算节点深度在排除递归方法后，找到了一个更为简单的方法：

function parentIndexOf(node,parent){
   if(node==parent){return 0;}
   for (var i=0,n=node; n=n.parentNode; i++){
       if(n==p){return i;}
       if(n==document.documentElement){return -1;} //找不到目标父节点，防止死循环
   }
}

函数的返回值是索引数字，如果入口节点与查找的父节点相同（即同一个元素），返回值为0，向上循环找到父节点后返回向上查找的节点级数，如果向上查找，到了整个页面的根节点，比如是<html>，还找不到，就返回-1，并结束循环。

返回值与String对象内置的indexOf方法相似。函数的关键是for的第二个参数n=n.parentNode，感觉比较巧妙。

赞 (0)

相关推荐

  • 关于extjs treepanel复选框选中父节点与子节点的问题

    关于extjs treepanel复选框选中父节点与子节点的问题

     extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f

  • 浅谈js的html元素的父节点,子节点

    parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child

  • JS获取父节点方法

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • js查找父节点的简单方法

    <div>         <a href="#">标题</a>         <ul id="demo">             <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                 <ul>             

  • JavaScript 获取元素在父节点中的下标(推荐)

    jQuery中直接通过$(this).index()即可得到当前元素的下标.但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算 <ul> <li>hello</li> <li>hello</li> <li id="mts">hello</li> <li>hello</li> </ul> var elt=documen

  • javascript下查找父节点的简单方法

    <div>        <a href="#">标题</a>        <ul id="demo">            <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                <ul>                 

  • Mysql 实现向上递归查找父节点并返回树结构的示例代码

    Mysql 实现向上递归查找父节点并返回树结构的示例代码

    通过mysql 8.0以下版本实现,一个人多角色id,一个角色对应某个节点menu_id,根节点的父节点存储为NULL, 向上递归查找父节点并返回树结构.如果只有叶子,剔除掉; 如果只有根,只显示一个秃顶的根 :如果既有叶子又有根则显示叶子与根.如果 传入角色ID 5,15,25,26,则只查找5,15的所有父节点,因为25,26无根节点 需求:通过mysql 8.0以下版本实现,一个人多角色id,一个角色对应某个节点menu_id,根节点的父节点存储为NULL, 向上递归查找父节点并返回树结构

  • javascript动态修改Li节点值的方法

    本文实例讲述了javascript动态修改Li节点值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

  • 分别在Linux和Windows下设置JVM内存的简单方法

    Linux服务器: 在/usr/local/apache-tomcat-5.5.23/bin 目录下的catalina.sh 添加:JAVA_OPTS='-Xms512m -Xmx1024m' 或者 JAVA_OPTS="-server -Xms800m -Xmx800m -XX:MaxNewSize=256m" 或者 CATALINA_OPTS="-server -Xms256m -Xmx300m" Windows服务器: 在/apache-tomcat-5.5.

  • EasyUI 中combotree 默认不能选择父节点的实现方法

    这需要添加如下字段就行,搜了半天,说什么判断是不是子节点什么的,都是胡扯! onlyLeafCheck:true, //病因分类 $('#artReason').combotree({ width:200, method:'GET', //url: '${ctx}/business/dict/json/DicEtilolgy', data:DicEtilolgy_data, idField : 'id', textFiled : 'name', parentField : 'pid', anim

  • javascript下给元素添加事件的方法与代码

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • JavaScript下申明对象的几种方法小结

    1.var myObject = {} ; 2.function myObject() { .... } 3.var myObject = function(){} ; 对于后两种方法,我们还可以增加参数,这样就类似于一个带参数的构造器了. 例如: function myObject(msg) { alert(msg) ; } var newObject = new myObject('Hello,World!') ; var myObject = function(msg) { alert(m

  • javascript 子窗体父窗体相互传值方法

    我们精简使用版本,一般情况好多cms都有一些这样的函数.dedecms中的选择相关文章也是用的这样的函数.下面给出具体的代码.父页面核心代码: 复制代码 代码如下: <script>function SelectArcListA(fname){ var posLeft = 10; var posTop = 10; window.open("content_select_list.asp?f="+fname+"&k="+form1.keyword.

  • list转tree和list中查找某节点下的所有数据操作

    类的实例化顺序 父类静态变量. 父类静态代码块. 子类静态变量. 子类静态代码块. 父类非静态变量(父类实例成员变量). 父类构造函数. 子类非静态变量(子类实例成员变量). 子类构造函数. 已知组织类Org{String id,String name,String parentId},现在一List<Org>中存放无序的Org数据,求一个组织id下的所有组织. public static List<Org> childList=new ArrayList<>(); p

随机推荐