• DOM获取符合条件的父级节点

    这种场景应该很常见，点击个原始，想获取最近符合要求的父节点

    代码如下:

    1.   function getParent(max) {
    2.             let index = 0;
    3.             let maxCheck = (max && max > 0) ? max : 100;
    4.  
    5.             function getP(child, fn) {
    6.                 index++;
    7.                 if (index >= maxCheck) {
    8.                     return null;
    9.                 }
    10.                 let parentNode = child.parentNode;
    11.                 if (parentNode) {
    12.                     if (fn(parentNode)) {
    13.                         return parentNode
    14.                     } else {
    15.                         return getP(parentNode, fn);
    16.                     }
    17.                 }
    18.             }
    19.             return getP
    20.         }

    代码核心是：递归，闭包

    闭包中维护一个递归层级的变量，如果超出这最大层级还没有找到就返回null，

    该函数

    接受一个number类型的参数，表示最大可递归的层级，默认100

    该函数执行后返回一个函数，这个函数接受2个参数，

    1. 第一个是当前的dom对象，
    2. 另外一个是函数，接受一个dom参数是父节点，返回true代表符合条件，false不符合

    使用demo

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div class="a">
    13.         <span>点击我？？</span>
    14.         <div class="b">
    15.             <span class="c">点击我</span>
    16.         </div>
    17.     </div>
    18.     <script>
    19.         function getParent(max) {
    20.             let index = 0;
    21.             let maxCheck = (max && max > 0) ? max : 100;
    22.  
    23.             function getP(child, fn) {
    24.                 index++;
    25.                 if (index >= maxCheck) {
    26.                     return null;
    27.                 }
    28.                 let parentNode = child.parentNode;
    29.                 if (parentNode) {
    30.                     if (fn(parentNode)) {
    31.                         return parentNode
    32.                     } else {
    33.                         return getP(parentNode, fn);
    34.                     }
    35.                 }
    36.             }
    37.             return getP
    38.         }
    39.  
    40.         window.onload = function() {
    41.             let getMatchParent = getParent();
    42.             document.querySelector(".c").onclick = function() {
    43.                 console.log("点击了")
    44.                 let p = getMatchParent(this, function(dom) {
    45.                     return dom.className === "a";//寻找class为a的父元素
    46.                 })
    47.                 console.log("p", p)
    48.             }
    49.         }
    50.     </script>
    51. </body>
    52.  
    53. </html>

  • 相关阅读:
    【ASM】字节码操作 转换已有的类 在方法进入和退出的时候 添加
    c++学习MFC还是QT？
    如何对pdf文件进行压缩？
    机器学习算法面试知识点解读
    Apache JMeter压测工具
    文心一言 VS 讯飞星火 VS chatgpt （105）-- 算法导论10.1 3题
    Nginx部署前端项目
    【springboot】通过拦截器全局监听请求
    自定义preference的使用
    Openresty缓存使用
  • 原文地址：https://blog.csdn.net/u014071104/article/details/125422214