如何使用JavaScript選擇第3個列表項

Question

如何在Java腳本中獲取第3個li元素

我想使用Java腳本選擇3rd li元素

<ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ul>

Answer 1

您可以使用:nth-child(3)選擇第三個孩子

正如您被標記為jquery

 $('ul li:nth-child(3)').css('color', 'red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 

或使用純JavaScript使用querySelector()

 document.querySelector('ul li:nth-child(3)').style.color = 'red'; 

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 

Answer 2

您可以使用以下JavaScript代碼在列表中選擇第3個元素-

var listElem = document.getElementsByTagName("li")[2];