爲什麼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; 
    } 
};

來源

2017-08-10 Justin Roohparvar

你可以在問題中包含HTML嗎？ – guest271314

我不知道如何在創建原始帖子之後。 –

您可以在stacksnippets中重現該問題嗎？見https://stackoverflow.com/help/mcve – guest271314

-1

很難知道只有上面的代碼，但您正在測試null但未定義。我的代碼更改爲：

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

按Check if object exists in JavaScript

來源

2017-08-10 14:28:26

腳本的完整代碼可以在這裏找到：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控制檯。

來源

2017-08-10 14:45:28

爲什麼currentParent未定義

回答

相關問題