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>

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

Answer 1

使用以下内容：

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

nth-last-child将返回最后一个元素，add 2将返回列表中的第二个最后一个元素。

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');
});

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');

Answer 4

在这里，我想再添加一个解决方案

如果您只想添加css3动画，这将对您有所帮助。也不想添加任何课程

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

}

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

4 个答案: