【问题标题】：How to add a class to a <li> generated by PHP using jQuery?如何将类添加到 PHP 使用 jQuery 生成的 <li>？
【发布时间】：2014-03-17 18:14:59
【问题描述】：

我有一些由 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>

希望这是有道理的。

【问题讨论】：

为什么 PHP 不这样做？
@Chris，我必须编辑您的编辑以删除您添加的额外“谢谢”。虽然在现实生活中非常有用，但这种友好的玩笑不适合添加到本网站上的问题或答案中......尤其是当它们不是你的，所以请在以后的编辑中不要这样做。

标签： php jquery html css

【解决方案1】：

我知道你想要做什么，你希望每 4 个 li 不有 margin-right，所以不需要为此分配任何 class，你可以实现这一点使用纯 CSS，因为您也为 CSS 标记了问题..

ul li:nth-child(4n) {
   margin-right: 0;
}

Demo （使用color 属性来显示选择器的工作原理）

Demo 2（margin等效演示）

【讨论】：

【解决方案2】：

您可以使用:nth-child

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

演示：Fiddle

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

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

演示：Fiddle

【讨论】：

【解决方案3】：

你可以对每一行的最后一个 li 应用相同的 name 属性，然后使用 $("your li selector on the name" ).addClass( "myClass yourClass" );

例如：$("li[name='last']").addClass("noMarginRight");

【讨论】：

【解决方案4】：

既然你提到你使用 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>';
                }

   }

}

【讨论】：

【解决方案5】：

您可以从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>

【讨论】：

【解决方案6】：

仅 CSS 方法

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

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

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

【讨论】：