Question

基本上我有一些树的HTML代码，我正在遍历它的Nodelist，并且如果它们有子节点，则将某些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：

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循环我已返回[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伪类表示一个元素，如果任何选择器（相对于给定元素的：scope）作为参数传递，则匹配至少一个元素。 :has()伪类将选择器列表作为参数。

请考虑此样式规则，它将匹配包含其他元素的任何li元素。无需JavaScript。

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

}

Answer 2

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

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

Answer 3

你可以使用for循环来做任何事情，但你的代码不正确...将子项分配给innerHTML不是一个兼容的赋值，而在循环中执行它只会导致元素'check'被赋值多次，而不是添加。

如果您使用的是jQuery，请使用：

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

我可以使用带有Nodelist的For循环吗？

3 个答案: