如何一次将相同的类添加到多个元素中？

Question

在我的网站上，我使用无序列表来描述我的产品。但是有太多的产品了。现在，我想在倒数第二个位置的产品按钮上添加一点动画效果。我在我的CSS文件中创建了一个包含动画的类，并希望将此动画添加到那个倒数第二个 li 上。

我知道我可以手动为那个 li 添加不同的类，但问题是有713个无序列表或产品描述。

所以，是否可能一次性向所有这些倒数第二个 li 添加类？

我的产品描述如下。

<ul class="product_details">
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li class="HERE_I_WANT_TO_ADD_THAT_CLASS">Button</li>
   <li>Text</li>
</ul>

我在互联网上搜索了，但没有找到解决方案。

- user3904617

---

你可以简单地使用$(".product_details > li:last").prev(); - maddy

或者你可以简单地使用一个带有大规模搜索和替换功能的文本编辑器？ - Falco

Answer 1

请使用以下内容：

$( "ul li:nth-last-child(2)" ).addClass( "CLASS_YOU_WANT_TO_ADD" );

nth-last-child将返回最后一个元素，再加2将给出列表中倒数第二个元素。

- darkknight

Answer 2

尝试这样做：找到product_details中的最后一个li，然后执行prev()以获取倒数第二个li并添加你的类。

$(document).ready(function(){
  $('.product_details').find('li:last').prev('li').addClass('HERE_I_WANT_TO_ADD_THAT_CLASS');
});

- Bhushan Kawadkar

Answer 3

如果想实现此功能，您需要了解jQuery或CSS选择器的使用。

有两种方法可以实现它。

使用CSS

. product_details li:nth-child(16) {
    /* YOUR ANIMATION GOES HERE */
}

使用 jQuery

$('.product_details li:nth-child(16)').addClass('YOUR_ANIMATION_CLASS');

- web2tips

---

感谢提供 CSS 解决方案，我不熟悉 jQuery，所以避免使用它。 - user3904617

CSS的解决方案假定您事先知道元素的数量。我建议使用:nth-last-child(2)（请参见Snehal Shan的答案）。 - Cthulhu

Answer 4

我在这里想要添加一种解决方案

如果您只想添加CSS3动画，那么这将对您有所帮助。同时不需要添加任何类。

.product_details li:nth-last-child(-1){

}

- Muthukumar

---

你确定这种结构存在吗？(:last-child(n)) - Cthulhu