每隔一个列表项添加一个？

Question

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

原文：

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

需要：

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

小提琴：http://jsfiddle.net/9uksT/

这可以用Jquery吗？

编辑：哦，对不起，对不起。我也愿意使用CSS。我只需要在每两对列表项之间留一个空格

Answer 1

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

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

http://jsfiddle.net/mblase75/9uksT/3/

那就是说，我会用定义列表替换你的<ul>子列表，在这种情况下，这更符合语义：

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

http://jsfiddle.net/mblase75/E7gAA/

Answer 2

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

http://jsfiddle.net/TrueBlueAussie/9uksT/2/

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

更新

由于问题现在已经改变，要包含CSS，我不会这样做，但会使用选择器在LI上设置样式（如Arun P Johny所示）。 e.g。

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

这适用于所有浏览器。

Answer 3

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

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

然后

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

演示：Fiddle

注意：正如我在评论中所示，可以使用nth-child selector完成，但IE < 9不支持