如何將課程添加到 <li> PHP使用jQuery生成？

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

我知道你要做的是什么，你希望每個第四個li 沒有 margin-right ，所以不需要為它分配任何class ，你可以使用純CSS實現這一點，因為你已經為CSS標記了問題..

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

演示 （使用color屬性顯示選擇器如何工作）

演示2 （ margin等效演示）

Answer 2

您可以使用：nth-​​child

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

演示： 小提琴

如果你確定總是數字，如果行是4的倍數那么

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

演示： 小提琴

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

您可以將相同的name屬性應用於每行的最后一個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 Only方法

為了完整起見，這是一個純粹的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>