Add class when div:after content equals "0"

Question

I have a simple ul list with some number of li elements - some of them have specific class .count.

Using CSS counter() function I'm counting number of li.count and displaying it as a content: counter() for #result:after.

And now is the problem - if the number of li.count equals 0 I want to remove .hidden class from #message.

    <ul id="list">
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class="count"> ... </li>
    </ul>

    <div id="result"> ... </div>

    <p id="message" class="hidden"> ... </p>

I was trying to do some JQuery for that but I'm not quite sure if I made some mistakes or if this 0 from #result:after {content: counter()} is a real value for the browser.

I think you need counter value to check in java script and then have to make any decision to remove class so this link talks about some way to deal with this problem, hope this helps: https://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript — D. Pareek, Jan 18 '18 at 04:55

Alive to die - Anant · Accepted Answer · 2018-01-18T05:33:00.827

1

As you said:- if the number of li.count equals 0 I want to remove .hidden class from #message.

You can do it like below:-

if($('li.count').length ==0){
 $('#message').removeClass('hidden');
}

example 1:-https://jsfiddle.net/yvyj14kw/

example 2:- https://jsfiddle.net/1k81m56c/

edited Jan 18 '18 at 05:33

answered Jan 18 '18 at 04:47

Alive to die - Anant

70,531
10
51
98

We are almost there. The situation is a little bit more complicated so I wanted to use `counter()` value. My `li`'s have more classes so counting only `li.count` doesn't works. Is there a chance to add somes specific style value to `li.count`? For example: count all `li.count` elements that also have property `display:block` in CSS file – Marcin W Jan 19 '18 at 01:31
@MarcinWasilewicz it's possible. But pls ask a new question regarding that with proper HTML input and your code effort what you tried so far to solve your problem. You will get answer for-sure. You can address me the link too, and if i have time i will try to answer too – Alive to die - Anant Jan 19 '18 at 04:17
Thank you very much for your effort. I found the way how to do that but it is wrong concept (it is my fault). JQuery checks it once while loading page but in my case number of `li`'s is changing when user does some actions on page. I need to think on some other solution. Thanks one more time! – Marcin W Jan 19 '18 at 04:23

score 1 · Answer 2 · answered Jan 18 '18 at 05:04

<a href="#" id="countitems">Count Number of List Items in following List</a>
    <ul id="list">
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
        <li class=""> ... </li>
  </ul>
 <div id='hidden'>There are no childrens </div>

CSS

#hidden {
  display: none;
}

JS

$(document).ready(function(e) {
    if ($('#list').children('li.count').length === 0) {
        $('#hidden').show();
    }
});

score 0 · Answer 3 · answered Jan 18 '18 at 04:50

0

You may use below piece of code

var count = 0;
        $('#list li.count').each(function(){
            count++;
        });
        if(count == 0) {
            $('#message').removeClass('hidden');
        }

answered Jan 18 '18 at 04:50

jeet427

538
3
16

Add class when div:after content equals "0"

3 Answers3