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