没有找到父类或父类答案

【问题标题】：Doesnt have parent or Parent Class isnt found没有找到父类或父类
【发布时间】：2017-03-16 19:20:35
【问题描述】：

我有一个方法findParentByClassName 向上查找特定的父类。它运行良好，但现在我试图返回两个警报，具体取决于 1) 是否找不到该名称的 parentClass。 2）它没有父母。这是我目前所拥有的，但它似乎无法正常工作。

var findParentByClassName = function(element, targetClass) {
    if (element.parentElement) {
        var currentParent = element.parentElement;
        while (currentParent.className != targetClass && currentParent.className !== null) {
            currentParent = currentParent.parentElement;
        }
        if (currentParent === targetClass) ? return currentParent : alert("No parent found with that class name");
    } else {
        alert("No Parent Element")
    }
};

【问题讨论】：

您在开发者工具控制台中有任何错误吗？ - 喜欢expected expression, got '?'
除了语法错误之外，您的函数不应同时返回值和警报

标签： javascript dom nodes

【解决方案1】：

我个人会用异常替换警报或返回 undefined/null，并使用 classList 属性。

但这是您的代码转换为工作。

您的问题是对tenery 的无效使用，并且您还没有检查 currentParent 是否为空。

我已经更新并添加了一个findParentByClassName2，它可以处理具有多个类的父级，如果找不到则返回 undefined。

var findParentByClassName = function(element, targetClass) {
    if (element.parentElement) {
        var currentParent = element.parentElement;
        while (currentParent && currentParent.className != targetClass && currentParent.className !== null) {
            currentParent = currentParent.parentElement;
        }
        if (currentParent && (currentParent.className === targetClass)) return currentParent;
        alert("No parent found with that class name");
    } else {
        alert("No Parent Element")
    }
};

//a modified version, that will also look for parents
//with multiple classes,.. 
var findParentByClassName2 = function(element, targetClass) {
  element = element ? element.parentElement : null; //skip self
  while (element) {      
    if (element.classList.contains(targetClass)) return element;
    element = element.parentElement;
  }  
}

var a = document.querySelector('.two');
console.log(findParentByClassName(a, 'one'));
console.log(findParentByClassName(a, 'invalid'));
console.log(findParentByClassName2(a, 'one'));
console.log(findParentByClassName2(a, 'invalid'));

<div class="one">
  <div class="two">
  </div>
</div>

【讨论】：