向 Wordpress 添加第一个和最后一个类小部件内容

Question

在 WordPress 中，我正在寻找某种方法来添加“最后”和“第一个”类来列出 Wordpress 小部件内的项目。 HTML 可能如下所示：

<div class="widget-area">
<ul >
    <li class="widget_recent_comments">
        <h3 class="widget-title">Recent comments</h3>
        <ul id="recentcomments">
            <li class="recentcomments">Comment 1</li>
            <li class="recentcomments">Comment 2</li>
            <li class="recentcomments">Comment 3</li>
            <li class="recentcomments">Comment 4</li>
        </ul>
    </li>
    <li class="widget_my_links">
        <h3 class="widget-title">My links</h3>
        <ul id="my-links">
            <li class="item">Link 1</li>
            <li class="item">Link 2</li>
            <li class="item">Link 3</li>
            <li class="item">Link 4</li>
            <li class="item">Link 5</li>
        </ul>
    </li>
</ul></div>

在上面的示例中，我希望使用“Comment 1”、“Comment 4”、“Link 1”和“Link 5”将第一个/最后一个类添加到 li 中。

有一个简单的解决方法吗？ （我不想用 JavaScript 来做到这一点）

谢谢。

Answer 1

我猜这些列表是在循环中生成的。因此，您可以做的是在进入循环之前创建一个变量，并将其值设置为 1 ($i = 1)。在循环结束时，加一 ($i++)。现在，您希望出现第一个/最后一个类，您可以执行

<?php if($i == 1):
  echo ' first';
elseif( $i == $number_of_items )
  echo 'last';
endif;      
?>

At $i == $number_of_items，您将最大值与当前值进行比较，因此如果语句为真，您就知道您拥有最后一个。

希望这能回答您的问题。

Answer 2

第一项很简单，只需使用

ul#my-list li:first-child {
    /* special styles */
}

它，它不会添加类，但您仍然可以设置它的样式。不幸的是 :last-child 没有类似的 css 规则