Question

我有一个无序列表，使用php和mysql从数据库生成值。

<div id="articles">
    <ul>
        <?php foreach ($articles as article) { ?>
            <li><a href="/articles/<?php echo $article['name']; ?>"> <?php echo $article['name']; ?> </a> </li>
        <?php } ?>
    </ul>
</div>

我想使用jQuery为该列表中除最后一个项目之外的每个项目添加一个css类

Answer 1

//then you can select all `li` elements under `#articles` except the last one like

jQuery(function($) {
  $('#articles li:not(:last)').addClass('myclass')
})

.myclass {
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="articles">
  <ul>
    <li><a href="/articles/1">1</a></li>
    <li><a href="/articles/2">2</a></li>
    <li><a href="/articles/3">3</a></li>
  </ul>
</div>

您只能使用css

#articles li {
  background-color: lightgrey;
}
#articles li:last-child {
  background-color: white;
}

<div id="articles">
  <ul>
    <li><a href="/articles/1">1</a></li>
    <li><a href="/articles/2">2</a></li>
    <li><a href="/articles/3">3</a></li>
  </ul>
</div>

Answer 2

<div id="articles">
<ul>
    <?php 
         $count =count($articles);
         foreach ($articles as article) {
           $counter++;
            If($count==$counter)
                 $class='something';
             Else
                 $class='';
 ?>
               <li><a href="/articles/<?php echo     $article['name']; ?>"> <?php echo $article['name']; ?>     </a> </li>
        <?php
             }
         ?>
</ul>
</div>

现在在li中使用类变量。

Answer 3

使用PHP也可以通过在代码中再添加一个条件来实现相同的功能。

foreach ($articles as $article) {
    if(end($articles) == $article) {
    ?>
       <li><a href="/articles/<?php echo $article['name']; ?>"> <?php echo $article['name']; ?> </a></li>
    <?php
    }
    else{ ?>
       <li class="myclass"><a href="/articles/<?php echo $article['name']; ?>"> <?php echo $article['name']; ?> </a></li>
   <?php
      }
}

添加css类以列出除jQuery中的最后一项之外的项目

3 个答案: