Heim >Web-Frontend >js-Tutorial >js查找父节点的简单方法_javascript技巧

js查找父节点的简单方法_javascript技巧

WBOY
WBOYOriginal
2016-05-16 19:03:261725Durchsuche

        标题
        

                
  • 项目一

  •                 

                          
    • 子类一

    •                     
    • 子类二

    •                 

                
  • 项目一

  •             
  • 项目

  •         


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

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

      function parentIndexOf(node,parent){
          if(node==parent){return 0;}
          for (var i=0,n=node; n=n.parentNode; i++){
              if(n==parent){return i;}
              if(n==document.documentElement){return -1;} //找不到目标父节点,防止死循环
          }
      }
      函数的返回值是索引数字,如果入口节点与查找的父节点相同(即同一个元素),返回值为0,向上循环找到父节点后返回向上查找的节点级数,如果向上查找,到了整个页面的根节点,比如是,还找不到,就返回-1,并结束循环。

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn