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

Question

我正在建设一个艺术家的网站，需要能够张贴一个声明，画廊，视频，或诗歌内容。

我有一个可选项卡内容列表，这些内容是基于不存在于该类别中的内容而生成的(例如:语句选项卡仅在有声明内容时才存在，视频内容相同，画廊内容相同，诗歌内容相同)。

我需要做的是动态地添加一个CSS片段，根据有多少项是in选项卡列表，因为站点是响应的。

当所有四个类别都存在时，它们的宽度是容器的25%。

我想要的是使用PHP来找出该页面的列表项的长度，如果有3个列表项，我希望它们的宽度为容器的33.3%。

有什么想法吗？

编辑:这是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>

Answer 1

我建议：

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

JS Fiddle演示。

这确实要求li元素被浮动，以便li中的空白不会导致li元素之间的间隔。

参考文献：

• css()。

Answer 2

您可以用jQuery来计数子元素：$("ul.jquery-tabs“).size()

编辑:对不起，那是在客户端。在服务器端，我可能会这样做：

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

最后，$count变量将包含显示的元素数。