Question

对不起，如果已经问过这个问题，但我如何通过父母（ul）id选择孩子（li）？代码：

    <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

如果选择了多个子节点，

.childNodes将返回一个数组。要改变所有这些：

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

Answer 2

我不确定您是否要选择所有儿童，但请尝试：

$('#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 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"});

如果您为每个属于#nav ul的孩子设计样式，那么您就不需要迭代器或循环或任何东西，而是将它应用于所有这些。< / p>

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';
});

Javascript按父母ID选择子项

5 个答案: