我可以将 For 循环与节点列表一起使用吗？

Question

基本上我有一些 HTML 代码是一棵树，我为它遍历了 Nodelist 并分配某些 classes 给节点，如果它们有 children，这是一个片段:

<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:

parent_list = document.getElementsByTagName("LI");
  var i;
  $(document).ready(function() {
    for (i=0; i < parent_list.length; i++){
        children = $(i).find('LI');
        document.getElementById('check').innerHTML = children;
    }
    });

for 循环我有 return [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() 伪 class，您可以将其用于 select 满足某些条件的元素。

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

The :has() CSS pseudo-class represents an element if any of the selectors, relative to the:scope of the given element, passed as parameters, matches at least one element. The :has() pseudo-class takes a selector list as an argument.

改为考虑此样式规则，它将匹配包含另一个元素的任何 li 元素。不需要 JavaScript。

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

}

Answer 2

您可以对任何内容使用 for 循环，但您的代码不正确...将子项分配给 innerHTML 不是兼容的分配，在循环中执行它只会导致元素 'check' 被分配多次，而不是加法。

如果您使用 jQuery 则使用：

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

Answer 3

由于您使用的是 jQuery，因此不需要 for 循环

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

我可以将 For 循环与节点列表一起使用吗？

Can I use a For loop with a Nodelist?

html

javascript

nodelist