親クラスまたは親クラスが見つかりません

Question

特定の親クラスを上向きに表示するメソッドfindParentByClassNameがあります。それはうまくいきましたが、今では、1）その名前のparentClassが見つからないかどうかに応じて2つのアラートを返そうとしています。 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") 
    } 
}; 

Answer 1

個人的には、警告を例外に置き換えたり、未定義/ nullを返したり、classListプロパティを使用します。

しかし、あなたのコードは動作するように変換されています。

問題は、teneryの無効な使用であり、currentParentがnullであるかどうかもチェックしていませんでした。

複数のクラスを持つ親を処理できる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>