ForループとNodelistを併用できますか？

Question

は基本的に私は木である、いくつかのHTMLコードを持って、私はそれのためにノードリストを横断したと、彼らは子供を持っている場合、ノードに特定のclassesを割り当て、ここに抜粋です：

<li id='test' class="parentNode"> 
    <button class="customer-btn button"><a href='#'>Customer 6</a></button> 
    <ul> 
     <li> 
     <a href='#'>Customer A</a> 
     </li> 
    </ul> 
    </li> 
    <li class="parentNode"> 
    <button class="customer-btn button"><a href='#'>Customer 7</a></button> 
    <ul> 
     <li> 
     <a href='#'> Customer A</a> 
     </li> 
    </ul> 
    </li> 

これは私のJavascriptです：

ループforループ私が返すのは[object Object]です。これを行うにはどうすればよいですか？

Answer 1

You don't need jQuery。

window.addEventListener('DOMContentLoaded', run); 
function run() { 

    var allLIElements = document.getElementsByTagName('LI'); 
    for(var i = 0; i < allLIElements.length; i++) { 
     var li = allLIElements[i]; 
     if(li.firstElementChild != null) { 
      li.classList.add('hasChildren'); 
     } 
    } 
} 

CSSはあなたには、いくつかの基準を満たす要素を選択するために使用することができ、提案:has()疑似クラスを持っているとして、これはすぐに不要になることに注意してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

:has() CSS擬似クラスは、要素に対するセレクタのある場合を表し：パラメータとして渡された指定された要素の範囲は、少なくとも一つの要素と一致します。 :has()疑似クラスはセレクタリストを引数として取ります。

代わりに、このスタイルルールを考慮すると、別の要素を含むli要素に一致します。 JavaScriptは必要ありません。

li:has(> *) { /* As of early 2017 no browser supports this selector yet! */ 

} 

Answer 2

あなたは何のためのforループを使用することができますが、あなたのコードが正しくありません... innerHTMLプロパティに子を割り当てると代入互換性はなく、ループの中でそれをやっては、単に '要素になりますチェック 'は複数回割り当てられますが、追加はありません。その後、

あなたはjQueryのを使用している場合は使用します。

$('#check').append(children); 

Answer 3

あなたはjQueryのを使用しているので、あなたはあなたが、それは意志、このためのjQueryを必要としないループ

$('li').each(function(index, element){ 
    if($(element).children().length > 0){ 
     $(element).addClass('myClass') 
    } 
})