Add a specific class to every 4th li that is displayed/visible

Question

Newbie in Javascript and in English, please forgive my writing.

I've searched and came across many posts explaining how I should add a class but they are not the same as what I need to do.

I would like to add a specific class to every 4th li that is displayed (or is visible), by which I mean, I have some li that are not displayed and they should be excluded from the counter:

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

So what's not working for you? Where's your css for the class `lastli`? — Matt Burland, Sep 16 '13 at 14:33
This looks like a duplicate of SO 2175694 : http://stackoverflow.com/questions/2175694/jquery-nth-child-that-is-currently-visible — AardVark71, Sep 16 '13 at 14:42

Harry · Answer 1 · 2013-09-16T17:00:05.287

4

You can do it the below way:

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

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

edited Sep 16 '13 at 17:00

answered Sep 16 '13 at 14:34

Harry

87,580
25
202
214

1

Doesn't answer the OP question of needing to select every 4th *visible* `
`. Some of them are not displayed and he doesn't want those included in the "every 4th item" count.

Scott

Sep 16 '13 at 14:43

No he's not. Look at the code he posted and where he's specified the class to be added. – Scott Sep 16 '13 at 14:45

@Scottie: I think I got what you mean now. Maybe if OP added two hidden li somewhere in between it would have been clearer. – Harry Sep 16 '13 at 14:49

Yeah, it's definitely open to interpretation. I'm going by his statement of `I would like to add a specific class to every 4th li displayed` to mean that he wants every 4th visible li to have the class added to it, essentially skipping over everything that's hidden. I've rescinded the downvote because hey, we're all friends here. :D //edit: drat, SO isn't letting me change my vote unless your question is edited. D: – Scott Sep 16 '13 at 14:50

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Update

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

I really thought this next method would have worked, but apparently not!

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 16 '13 at 14:33

gvee

16,732
35
50

I just tested this and it only returns `
8 Fusce

Scott

Sep 16 '13 at 14:41

@Scottie exactly. I posted it, went off to test it, but by then had 2 upvotes, so thought I must have done something wrong! – gvee Sep 16 '13 at 14:44

3

using the :visible selector was half-way.. see SO2175691 http://stackoverflow.com/questions/2175694/jquery-nth-child-that-is-currently-visible – AardVark71 Sep 16 '13 at 14:48

@AardVark71 thanks for the explanation. I came up with the workaround but couldn't explain *why* what seemed so logical wasn't working! – gvee Sep 16 '13 at 14:54

It doesnt work, highlight only "8 Fusce" and totally ignores "4 sin amet" – davidkonrad Sep 16 '13 at 15:01

score 2 · Answer 3 · answered Sep 16 '13 at 14:35

2

just write a css-rule similar to this:

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

you will get what you want!

answered Sep 16 '13 at 14:35

andrea.rinaldi

1,167
1
13
33

davidkonrad · Accepted Answer · 2013-09-17T04:44:38.637

I think the other answers not is was considering that you want every forth <li> to have the class lastli, and also want to ignore <li>'s with display:none;

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

does the job right. Demo : http://jsfiddle.net/bAs3d/

Add a specific class to every 4th li that is displayed/visible

4 Answers4

Update