javascript - 遍历 DOM 以确定父级的状态。根据条件返回字符串

Question

这是我的代码:

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

我需要能够检查其他两个条件:

1. 检查所提供的“元素”是否有父元素。如果是，则将字符串发送到控制台。
2. 如果找不到具有提供的“targetClass”名称的父级，则让它向控制台返回不同的字符串。

我假设这将通过 if - if-else - else 函数来完成，但对于我的一生，我只是无法得到它。

Answer 1

尝试使用这个(代码在代码片段下解释):

var findParentByClassName = function(elem, className)
{
  if(elem == null)
  {
    console.log("No elem");
  }
  else if(elem.parentNode == null)
  {
    console.log("No parent");
  }
  else
  {
    console.log("Found a parent, looking for an ancestor with the given class name");

    var ancestor = elem.parentNode;
    while(ancestor != null)
    {
      if(ancestor.classList.contains(className))
      {
        console.log("Found ancestor with correct classname");
        return parent;
      }
    }
  }
  console.log("Could not find parent with correct class name.");
  return null;
};

首先，您仔细检查是否确实获得了一个元素。如果没有，我们无能为力。

然后，我们使用 else if - 而不是 if else - 来检查元素是否有父元素。如果没有，我们就无能为力了。

最后，如果我们有一个带有祖先的元素，我们的 else 分支就会被执行。从这一点开始，我们可以迭代地向上移动 DOM 树。如果我们找到一个其 classList 包含我们给出的 className 的元素，我们就找到了一个匹配的祖先，并返回它。否则，我们返回 null。

请注意，此代码查找具有匹配类名的祖先，该祖先不一定是直接父代。根据您的代码，我假设这就是您想要的。

现在，如果您使用 jQuery，这会变得更加容易:

var findParentByClassName = function(elem, className)
{
  return $(elem).closest("." + className);
};

这里的缺点是您将无法记录解释的消息为什么如果不存在具有正确类名的祖先，就找不到它。

以下是 if-else if-else 语句的工作原理:

if(condition)
{
  // code to execute if the condition is true
}
else if(condition2) // condition2 is only checked if the 1st one is false
{
  // code to run if condition2 is true
}
else if(condition3) // you can have 0 or more else if conditions
{
  // in practice, you can have as many as you want
  // there are limits, but you'll probably never reach them
  // unless you're trying to
}
else
{
  // code to execute if none of the conditions were true
}

条件是 bool 表达式。这些可以是 bool 值，相等性检查，大于/小于，是否为变量为空/未定义，依此类推。

我建议阅读 JavaScript 教程以获取更多信息。