«

原生js 实现jquery 的parents

emer 发布于 2023-2-17 18:49   713 次阅读     


        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