每3 <li>

Question

我正在构建一个获取JSON数据并填充网站的网站，因此我获得了未知数量的项目，这些项目位于3列，我希望在每行之后有一个看起来很漂亮的行。

当它是静态内容时，我所做的是：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <div class="separator"></div>
  <li></li>
  <li></li>
  <li></li>
  <div class="separator"></div>
</ul>

但现在我得到了动态内容，我不知道如何管理它。

Answer 1

这不是有效的HTML，浏览器也不会这样呈现。您不能<div>作为<ul>的直接子女。 不可能。您可以尝试使用<li class="separator"></li>。

我会在每个第三个孩子之后使用这个小脚本添加一个新的<li>：

$(function () {
  $("li:nth-child(3n)").after("<li class='seperator' />");
});

.seperator {
  background: #ccf;
  padding: 1px;
  list-style: none;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>

Answer 2

您只需使用:nth-child - CSS选择器：

li:nth-child(3n) {
  /* replace with whatever style you have for the seperators */
  border-bottom:1px solid #999;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>