Javascript选择由父母的孩子编号

Question

对不起，如果这个问题已被问，但我怎么能选择一个孩子（李）由父母（ul）编号？ 代码：

<ul onmouseover="openNav()" onmouseout="closeNav()" id="nav"> 
     <li><a href="link1.html">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
    </ul> 

function openNav(){ 
    //document.getElementById('nav').style.height = '65px'; <-- this is working 
    document.getElementById('nav').childNodes.style.opacity = '1'; 
} 

我已经尝试过这样的：

document.getElementById('nav').getElementsByTagName('li').style.opacity = '1'; 

这：

document.getElementById('nav').childNodes.style.opacity = '1'; 

和其他几个，但没有工作请帮助我！ 感谢所有答案:)

Answer 1

我不知道，如果你想选择所有儿童，但尝试：

$('#nav').children('li').each(function(){ 
 
    console.log($(this).html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul onmouseover="openNav()" onmouseout="closeNav()" id="nav"> 
 
    <li><a href="link1.html">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
</ul>

希望这有助于。

Answer 2

.childNodes如果选择了多个子节点，将返回一个数组。要改变它们全部：

var childNodesArray = document.getElementById('nav').childNodes; 
for(var i = 0; i < childNodesArray.length; i++){ 
    childNodesArray[i].style.opacity = '1'; 
} 

Answer 3

如果您选择使用jQuery，请利用它并避免内联JavaScript。在每次回调的this关键字指li元素，其中作为$(this).parent()指ul元素：

$(function() { 
    $('#nav > li').on('mouseenter', function() { 
     //your code goes here 
    }) 
    .on('mouseleave', function() { 
     //your code goes here 
    }); 
}); 

Answer 4

你应该能够只是做...

$("#nav").find("li").css({"opacity" : "1"}); 

如果你每一个造型li是那个#nav ul的孩子，那么你不需要一个迭代器或一个循环或任何东西，它会将它应用于所有这些。

Answer 5

var lis = document.getElementById('nav').children; //childNodes will give you text nodes as well. You don't want that. That is why children 

然后迭代lis集合和应用样式。

Array.prototype.forEach.call(lis, function(li){ 
    li.style.opacity = '1'; 
});