Question

我想在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>

Answer 1

试试这个：

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

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

Answer 2

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

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

Answer 3

您可以使用常规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

Answer 4

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>

Answer 5

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

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

＆＃13;

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

＆＃13;

.myclass {
  color: red;
}

＆＃13;

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

＆＃13;

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

5 个答案: