如何在javascript中将类添加到第三个<li>元素

How to add class to the third <li> element in javascript

本文关键字：三个 元素 li javascript 添加      更新时间：2023-09-26

我想为 javascript 中的第三个元素添加类。我有这个结构：

<ul class="products-grid row four-columns first">
<li class="item"></li>
<li class="item"></li>
<li class="item add-class-here"></li>
<li class="item"></li>
</ul>

试试这个：

$( "ul.products-grid li:nth-child(3)").addClass("new_css_class");

参考 ： https://api.jquery.com/nth-child-selector/

$("ul.products-grid li").eq(2).addClass("classname");

此代码用于将类添加到第 3 个 li 元素。您可以对任何元素类似地使用 eq。

function doActive(ind) {
    var nItem = document.querySelector("#Folder_A li:nth-child(" + ind + ")");
    //select nth child under id 'Folder_A'
    nItem.classList.add("active");
    //Add class 'active' to nth child
}
doActive(3);
//or Call 'doActive' function onclick
#Folder_A li {
  padding: 12px;
}
.active {
  background-color: green;
}
<ol id="Folder_A">
    <li>FileName 1</li>
    <li>FileName 2</li>
    <li>FileName 3</li>
</ol>

你可以用常规的javascript来做到这一点。

var items = document.getElementsByClassName('item');
items[2].className += " hello";

我实际使用的较短版本：

document.getElementsByClassName('item')[2].className += " hello";

这里有一个工作示例：https://jsfiddle.net/revem5uh/

由于您还标记了 css，我想让您知道，只有 css 也有选择器可以做到这一点。

li.item:nth-child(3){
  color: blue;
}

参考： http://www.w3schools.com/cssref/sel_nth-child.asp

尝试eq()并将类添加到第三li，如下所示：-

$('ul.products-grid > li:eq(2)').addClass('classname')


$('ul.products-grid > li.item:eq(2)').addClass('myclass')
.myclass {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="products-grid row four-columns first">
  <li class="item">item</li>
  <li class="item">item</li>
  <li class="item add-class-here">item</li>
  <li class="item">item</li>
</ul>

相关文章：