我可以在节点列表中使用For循环吗？

-2

基本上我有一些HTML代码，是一棵树，我是遍历节点列表，为之并分配一定classes的节点，如果他们有了孩子，这里有一个片段：我可以在节点列表中使用For循环吗？

<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]，什么是最好的做什么？

来源

2017-04-03 Amon

你不需要jQuery的这一点，它会只会减慢你的脚本并增加不必要的依赖。 – Dai

要回答你的问题：“我可以使用带有NodeList的For循环吗？”：**是的，您可以**，因为NodeList具有'length'属性并且可以像数组一样索引。 – Aloso

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! */ 

}

来源

2017-04-03 19:11:04 Dai

*“考虑这个样式规则”*真的应该考虑多少考虑CSS规则，因为根据您的链接基本上没有浏览器支持它？ – 2017-04-03 19:16:31

谢谢，应该工作得很好，至少我不太远。此外，CSS功能将是一个上帝发送 – Amon

@squint由于这个答案将仍然在未来 - 因为它看起来像：：has（）'将被添加到规范最终我希望我的答案是未来-证明！：D – Dai

-1

您可以使用一个for循环的任何东西，但你的代码是不正确的......到innerHTML的分配孩子是不兼容的任务，并在一个循环做只会导致元素“检查'分配多次，而不是添加。

如果您正在使用jQuery然后使用：

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

来源

2017-04-03 19:11:38 SPlatten

由于您使用jQuery的你并不需要一个for循环

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

来源

2017-04-03 19:13:20 santi6291

你的答案不符合OP的标准：“如果他们有孩子，给节点分配某些类” – Dai

谢谢，更新后的代码片段 – santi6291

我可以在节点列表中使用For循环吗？

回答

相关问题