0

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

4 回答 4

4

您可以通过以下方式进行操作：

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

$(lstItems).each(function (i) {
    if ((i % 4) === 3) $(this).addClass('lastli');
});
于 2013-09-16T14:34:28.953 回答
2

更新

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

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

$('.liste li:visible:nth-child(4n)').addClass('lastli');
于 2013-09-16T14:33:23.417 回答
2

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

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

你会得到你想要的！

于 2013-09-16T14:35:25.503 回答
1

我认为其他答案不是考虑 到你希望每个人都有课，并且想忽略's with<li>lastlialso<li>display:none;

$(document).ready(function() {
    count=0;
    $('li:visible').each(function(i, e) {
        count=count+1;      
        if (count==4) {
            $(e).addClass('lastli');
            count=0;
        }
    });
});

做正确的工作。演示：http: //jsfiddle.net/bAs3d/

于 2013-09-16T14:47:42.657 回答