每隔一个列表项添加一个？ [关闭]答案

【问题标题】：Adding a every second list item? [closed]每隔一个列表项添加一个？ [关闭]
【发布时间】：2014-01-24 15:44:41
【问题描述】：

我有一个列表，我需要为每两个元素休息一下：

原文：

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

需要：

<ul>
<li></li>
<li></li>
</br>
<li></li>
<li></li>
</ul>

Jquery 可以做到这一点吗？

编辑：哦，抱歉这个问题。我也愿意使用 CSS。我只需要在每 2 对列表项之间留一个空格

【问题讨论】：

【解决方案1】：

不要以这种方式滥用  标签。使用 CSS 为每个第二个元素提供更宽的下边距：

.root ul li:nth-child(2n) {
    margin-bottom: 1em;
}

也就是说，我会将您的 <ul> 子列表替换为定义列表，在这种情况下这在语义上更正确：

.root dl {
    margin: 0 0 0 2em;
}
.root dl dd {
    margin-bottom: 1em;
}

【讨论】：

【解决方案2】：

您可以使用类和 jQuery 将类分配给正确的元素

.menu-vertical li.even{
    margin-bottom: 10px;
}

然后

$('.menu-vertical > ul li:nth-child(2n)').addClass('even')

演示：Fiddle

注意：正如我在 cmets 中显示的，它可以使用 nth-child selector 完成，但 IE < 9 不支持

【讨论】：

【解决方案3】：

如上所述，这将是无效的 HTML，但您可以在每秒 <li> 元素的末尾添加  &nbsp;

$('ul:not(.root) li:odd').append("<br/>&nbsp;");

更新：

由于问题现在已经改变，包括 CSS，我不会这样做，而是使用选择器在 LI 上设置样式（如 Arun P Johny 所示）。例如

$('ul:not(.root) li:odd').addClass('second')

这适用于所有浏览器。

【讨论】：