Question

我有这个HTML

<div class="dotstyle">
<ul>
    <li class="current"><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
</ul>

如何选择第n个li元素？有时我需要第二，有时是第三等。

我正在使用dotstyle选择document.getElementsByClassName('dotstyle')[0]课程，但我怎么能去李？

Answer 1

您可以将querySelector()与:nth-child()伪类一起使用。 DEMO

document.querySelector('.dotstyle li:nth-child(3)').style.background = 'red'

Answer 2

您可以使用此代码

 var lItems = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
    lItems[2].innerHTML = "<p>hello</p>";

 <ul>
        <li class="current"><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
    </ul>

如果你想要jQuery那么

$( "ul li:nth-child(2)" ).append( "hello li" );
    $( "li" ).eq( 3 ).css( "background-color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li class="current"><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
    </ul>

Answer 3

你可以试试这个

var myListItems = document.getElementsByClassName('dotstyle').getElementsByTagName('li');

for (i = 0; i < myListItems.length; ++i) {
   // logic for doing something with the elements 
}

Answer 4

Jquery有一个选择器列表，它使用id，class或attribute更容易选择元素。

您可以在一行中使用jquery选择元素的子元素。

$( ".dotstyle ul li:nth-child(2)" )

这给了第二个孩子类型li。

:nth-child() Selector

在div中选择第n个li

4 个答案: