原生js 实现jquery 的parents
首页 > >    作者:lininn   2023年2月17日 18:49 星期五   热度:534°   百度已收录  
时间:2023-2-17 18:49   热度:534° 
        function getParents(el, parentSelector /* optional */) {
            // console.log(el);
            // If no parentSelector defined will bubble up all the way to *document*
            if (parentSelector === undefined) {
                parentSelector = document;
            }

            var parents = [];
            var p = el.parentNode;

            while (p !== parentSelector) {

                var o = p;
                parents.push(o);
                p = o.parentNode;
            }
            parents.push(parentSelector);
            return parents;
        }
/*或者*/
/**
 * 查找dom的祖先元素 查看是否包含parentSelector的id或者样式的元素
 * @param el  传入的dom元素
 * @param parentSelector  要查找的祖先元素id名称或者类名
 * @returns boolean|HTMLElement
 * // getParents(document.getElementById('ResTableList'), '#main或者.main');
 */
export function getParents(el, parentSelector) {
  if (!parentSelector ||
      parentSelector === undefined) {
    throw new Error('请传入要搜索的父元素Id名或者类名#id或者.classname');
  }


  // 默认匹配的类型
  var type = 'className';
  var splitF = '.';
  // 如果第一个字符是#那么证明传入的是id
  if (parentSelector.indexOf('#') === 0) {
    type = 'id';
    splitF = '#';
  }
  // 根据类型拆分出字符串
  var selector = parentSelector.split(splitF)[1];

  function getP(el) {
    // 获取当前元素的父元素
    var p = el.parentNode;
    // 如果元素的父元素是document 那么证明已经到最后一层了 就是没有匹配到这个父元素
    if (p === document) {
      return false;
    }
    // 如果父元素的id或者class包含样式类
    if (p[type].indexOf(selector) > -1) {
      // 如果包含 那么返回这个元素
      return p;
    } else {
      // 如果不包含那么就递归 这里要return递归函数 否则会没有返回值
      return getP(p);
    }
  }

  var final = getP(el);

  return final;
}
getParents(document.getElementById('ResTableList'), '#main');
getParents(document.getElementById('ResTableList'), '.main');
如果他的某一个父元素中含有要查找的元素,则返回,没有则返回false

二维码加载中...
本文作者:lininn      文章标题: 原生js 实现jquery 的parents
本文地址:?post=574
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn