每3 <li>添加一个分隔符(<div>或行分隔符)

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个孩子之后添加一个新脚本:

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