Question

在Wordpress中，我正在寻找一些方法来添加“last”和“first”类来列出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>

在上面这个例子中，我希望将第一个/最后一个类添加到li，其中包含“Comment 1”，“Comment 4”，“Link 1”和“Link 5”。

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

谢谢。

Answer 1

我猜这些列表是在循环中生成的。所以你可以做的是在进入循环之前创建一个变量，并将它的值设置为1（$ i = 1）。比在循环结束时，添加一个（$ i ++）。现在，您希望第一个/最后一个类出现在哪里，您可以

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

在$ i == $ number_of_items，您将最大值与当前值进行比较，因此如果该陈述为真，您知道您拥有最后一个。

希望这能回答你的问题。

Answer 2

第一项很容易，只需使用

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

它不是添加一个类，但你仍然可以设置它的样式。遗憾的是:last-child没有类似的css规则

将第一个和最后一个类添加到Wordpress的小部件内容中

2 个答案: