如何使用javascript选择第三个列表项

Question

如何在java脚本中获取第3个li元素

我希望使用java脚本选择第3个li元素

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

Answer 1

您可以使用 :nth-child(3) 来选择第三个孩子

因为你被标记为jquery

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或使用 querySelector()

使用纯JavaScript

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下javascript代码选择列表中的第3个元素 -

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