Question

你好这段代码告诉我当前元素是否有类。

e.srcElement.className.indexOf('thisClass') === 0

我如何检查元素或其任何父母是否拥有该类？

Answer 1

如今，人们可以使用广泛支持的JavaScript closest方法。

const parentHasClass = element.closest('.thisClass');

Answer 2

您只需要遍历DOM。要让父母一方，请使用parentNode。

无限向上遍历，你需要使用一个循环：

for(var i = 0; i < nodes.length; i++) {
  // check if each parentNode has the class
}

这是一个单调乏味的过程。这就是为什么像jQuery这样的库只存在于DOM遍历/操作的唯一目的。

Answer 3

使用元素的parentNode，可以浏览父母列表使用以下功能：

function elementOrAncestorHasClass(element, className) {
  if (!element || element.length === 0) {
    return false;
  }
  var parent = element;
  do {
    if (parent === document) {
      break;
    }
    if (parent.className.indexOf(className) >= 0) {
      return true;
    }
  } while (parent = parent.parentNode);
  return false;
}

This fiddle显示正在运行的功能。

Answer 4

我可以提供使用下一个方法：

function hasClass(element, className) {
    return !(!className || !element || !element.className 
    || !element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')));
}

function parentByClass(childElement, className) {
    if (!childElement || childElement === document) {
        return null;
    } else if (hasClass(childElement, className)) {
        return childElement;
    } else {
        return parentByClass(childElement.parentNode, className)
    }
}

function hasClassInTree(element, className) {
    return hasClass(element, className) || parentByClass(element, className)
}

所以在你的情况下将是

if (hasClassInTree(e.srcElement, 'thisClass')) { ... }

Answer 5

可能更容易找到具有该类的所有元素，并检查它们中是否包含当前节点（未测试代码）：

   function checkParentClass(e,className){
      var nodesWithClass =document.getElementsByClassName("className");

      var index =0;
      var found = false;

      while(index< nodesWithClass.length && !found){
         if (nodesWithClass[index].contains(e))
         {
            found = true;
         }
         index++;
      }

      return found;
    }

Vanilla javascript检查元素或祖先是否有类

5 个答案: