为什么currentParent未定义

问题描述：

在下面的findParentByClassName函数中，currentParent返回undefined。有人能告诉我为什么吗？我认为它实际上在getSongItem，clickHandler和HTML TableRowElement中也是未定义的。为什么currentParent未定义

这是问题出现的地方。

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

      while (currentParent.className !== targetClass && currentParent.className !== 
       null) { 
       currentParent = currentParent.parentElement; 
      } 
      //I need to know why currentParent is returning undefined 
      return currentParent; 
     } 
    }  
};

这里也可能有问题。

var getSongItem = function(element) { 
    switch (element.className) { 
     case 'album-song-button': 
     case 'ion-play': 
     case 'ion-pause': 
      return findParentByClassName(element, 'song-item-number'); 
     case 'album-view-song-item': 
      return element.querySelector('.song-item-number'); 
     case 'song-item-title': 
     case 'song-item-duration': 
      return findParentByClassName(element, 'album-view-song-item').querySelector('.song-item-number'); 
     case 'song-item-number': 
      return element; 
     default: 
      return; 
    } 
};

你可以在问题中包含HTML吗？ – guest271314

我不知道如何在创建原始帖子之后。 –

您可以在stacksnippets中重现该问题吗？见https://stackoverflow.com/help/mcve – guest271314

答

很难知道只有上面的代码，但您正在测试null但未定义。我的代码更改为：

if (typeof element.parentElement!= "undefined") { 
    console.log("parentElement is undefined"); 
} else if (element.parentElement.className !== targetClass) { 
....

按Check if object exists in JavaScript

脚本的完整代码可以在这里找到：https://github.com/jar9tf/bloc-jams/blob/master/scripts/album.js我不'不一定要检查它是否未定义，而是看看为什么没有定义它 –

根据[MDN]（https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement），一个节点的'parentElement'总是一个元素或'null'，所以检查null就足够了。事实上，由于'null'被定义，*您的*检查将无法识别没有父节点的节点。 –

答

你只初始化currentParent的值情况下element的父母有你要找的类。在所有其他情况下，currentParent未定义。然后你的while循环会崩溃，并带有ReferenceError。当您打开它时，您可能会看到它在web console 中。

除此之外，您的代码有问题，您检查class attribute的全部值是否等于您正在查找的类。当一个元素有class="foo bar"，并且你想要将一个元素与foo类匹配时，这会出错。更好的方法是使用classList。

/** 
 
* Return the closest ancestor of the given element that has the 
 
* given class, or false if no such ancestor exists. 
 
*/ 
 
function findParentWithClass(element, className) { 
 
    if (element === null || element.parentElement === null) { 
 
    return false; 
 
    } 
 
    do { 
 
    element = element.parentElement; 
 
    } while (!element.classList.contains(className) && 
 
     element.parentElement !== null); 
 
    if (!element.classList.contains(className)) { 
 
    return false; 
 
    } 
 
    return element; 
 
} 
 

 
let el = document.getElementById('start'); 
 
console.log(findParentWithClass(el, 'bar')); // will find '.bar' 
 
console.log(findParentWithClass(el, 'fop')); // false, as there is no '.fop'

<div class="foo red"> 
 
    <div class="bar brown"> 
 
    <div class="baz orange"> 
 
     <div class="bor blue"> 
 
     <div id="start"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

__________
这是参考的Firefox，但所有现代浏览器有一个Web控制台。

为什么currentParent未定义

相关推荐