仅限CSS方法

Question

我有PHP生成的<li>个数。我希望每一行只显示4 <li>和该行中的最后一个<li>，以便拥有noMarginRight类？

<ul>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>
</ul>

希望这是有道理的。

Answer 1

我知道你要做的是什么，你希望每4个li 不拥有margin-right，所以不需要为class指定任何ul li:nth-child(4n) { margin-right: 0; }那么，你可以使用纯CSS来实现这一点，因为你已经为CSS标记了问题..

color

Demo （使用margin属性显示选择器的工作方式）

Demo 2 （{{1}}等效演示）

Answer 2

您可以使用:nth-child

$('ul li').filter(':nth-child(4n), :last-child').addClass('noMarginRight')

演示：Fiddle

如果您确定总是数字，如果行是4的倍数，那么

$('ul li:nth-child(4n)').addClass('noMarginRight')

演示：Fiddle

Answer 3

您可以从PHP代码管理，请尝试这种方式

     <ul>
    <?php
    $result = array("ads", "sdsa", "fsdfs", "fsdfsfsdf", "ffsfsf");
    $i = 0;
    foreach ($result as $k => $v) {
        ?>
        <li <?php echo (++$i % 4 == 0) ? "class=\"noMarginRight\"" : "" ?>><?php echo $v; ?></li>
<?php } ?>
</ul>

Answer 4

您可以将相同的名称属性应用于每行的最后一个li，然后使用 $（“您的li选择器基于名称”）.addClass（“myClass yourClass”）;

例如：$（“li [name ='last']”）。addClass（“noMarginRight”）;

Answer 5

由于你提到使用php来显示输出，这里有一种你可以使用php的方法，

    $counter    = 0;   

    while ($line = mysql_fetch_object($result)) 
    { 

              if($counter %4 != 0) 
                {

                    echo "<li  class='noMarginRight'>";
                    echo "your output";
                    echo '</li>';

                }
                else
                {
                    echo "<li>";
                    echo "your output";
                    echo '</li>';
                }

   }

}

Answer 6

仅限CSS方法

为了完整起见，这是一种纯粹的CSS3方式，可以实现您想要实现的目标：

＆＃13;

ul
{
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */
    column-count:4;
    -moz-column-gap:30px; /* Firefox */
    -webkit-column-gap:30px; /* Safari and Chrome */
    column-gap:30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

＆＃13;

<ul>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>
</ul>

＆＃13;

如何使用jQuery为PHP生成的<li>添加一个类？</li>

6 个答案:

仅限CSS方法