html - 每 3 个 添加一个分隔符( 或行分隔符)

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>在每第 3 个 child 之后:

$(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>