如何计算动态列表生成的<li>的数量，并根据该数字应用样式

I'm building a website for an artist that needs to be able to post either a statement, gallery, video, or poetry content.

I have a list of tab-able content that is generated based on wether not that there is content in that category (ex: the statement tab exists only when there's statement content, same for video, same for gallery, same for poetry.)

What I need to do is dynamically add in a little CSS snippet based on how many items are the in tab list because the site is responsive.

When all four categories exist, they are 25% width of the container.

What I would like is to use PHP to find out how many list items long that list is for that page and, say if there are 3 list items I would like their width to be 33.3% of the container.

Any ideas?

EDIT: Here is the list HTML

<ul class="jquery-tabs">

<?php if ( $statementTrue == true ) : ?>
    <li><a class="statement-tab" href="#statement-tab">statement</a></li>
<?php endif; ?>

<?php if ( $galleryTrue == true ) : ?>
    <li><a class="gallery-tab" href="#gallery-tab">gallery</a></li>
<?php endif; ?>

<?php if ( $videoTrue == true ) : ?>
    <li><a class="video-tab" href="#video-tab">video</a></li>
<?php endif; ?>

<?php if ( $poetryTrue == true ) : ?>
    <li><a class="poetry-tab" href="#poetry-tab">poetry</a></li>
<?php endif; ?>

</ul>

You can count child elements with jQuery: $("ul.jquery-tabs li").size()

EDIT: Sorry, that's on Client side. On the server side, I would probably do something like this:

  <ul class="jquery-tabs">
    <?php $count = 0; ?>
    <?php if ( $statementTrue == true ) {
      $count++;
     ?>
        <li><a class="statement-tab" href="#statement-tab">statement</a></li>
    <?php } ?>

    <?php if ( $galleryTrue == true ) {
      $count++; ?>
        <li><a class="gallery-tab" href="#gallery-tab">gallery</a></li>
    <?php } ?>

    <?php if ( $videoTrue == true ) {
       $count++;?>
        <li><a class="video-tab" href="#video-tab">video</a></li>
    <?php } ?>

    <?php if ( $poetryTrue == true ) { 
      $count++; ?>
        <li><a class="poetry-tab" href="#poetry-tab">poetry</a></li>
    <?php } ?>

</ul>

At the end, the $count variable will contain number of displayed elements.

I'd suggest:

var lis = $('ul.jquery-tabs li');
lis.css('width', (100/lis.length) + '%');

JS Fiddle demo.

This does require that the li elements are floated, in order that the white-space in the HTML doesn't cause spacing between the li elements.

References:

• css().