0

Javascript と英語の初心者ですが、私の書き込みをお許しください。

検索して、クラスを追加する方法を説明する多くの投稿に出くわしましたが、それらは私がする必要があることと同じではありません。

li表示されている (または表示されている) 4 番目ごとに特定のクラスを追加したいと思います。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 に答える
1

他の答えは、 あなたがすべてのクラスを持ちたいと考えていて<li>、lastli無視しalsoたい<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 に答える