Question

新手用Javascript和英文，请原谅我的写作。

我搜索过并发现了许多帖子，解释了我应该如何添加课程，但它们与我需要做的不一样。

我想为显示（或可见）的每4个li添加一个特定的类，我的意思是，我有一些li没有显示，应排除它们来自柜台：

<section>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
    <!--
      window.onload=function(){
        $('.liste li:nth-child(4)').addClass('lastli');
      };
    //-->
  </script>

  <ul class="liste">
    <li>1 Lorem</li>
    <li>2 ipsum</li>
    <li>3 dolor</li>
    <li style="display:none;">4 sin amet</li>
    <li>5 consectetur</li> <!-- add a lastli class here -->
    <li>6 aliquam</li>
    <li style="display:none;">7 lobortis</li>
    <li>8 Fusce</li>
    <li>9 fringilla</li>
    <li>10 rutrum</li> <!-- add a lastli class here -->
    <li>11 dapibus</li>
    <li style="display:none;">12 nunc</li>
    <li>13 nunc</li>
  </ul>
</section>

Answer 1

你可以通过以下方式实现：

var lstItems = $('.liste li').filter(function () {
    return $(this).is(':visible');
});

$(lstItems).each(function (i) {
    if ((i % 4) === 3) $(this).addClass('lastli');
});

Answer 2

更新

$('.liste li:visible').each(function (i) {
    if (i % 4 == 3) {
        $(this).addClass('lastli');
    }
});

我真的认为下一种方法可行，但显然不行！

$('.liste li:visible:nth-child(4n)').addClass('lastli');

Answer 3

只需编写类似于此的css规则：

.liste > li:nth-child(4)
{
    /*yourstyle*/
}

你会得到你想要的东西！

Answer 4

我认为其他答案不是是是，因为你希望每个前<li>拥有类{{1}和} lastli想要also

忽略<li>

display:none;

做得好。演示：http://jsfiddle.net/bAs3d/

将特定类添加到显示/可见的每个第4个li

4 个答案:

更新