Question

我有一个列表，我想在每隔一个列表元素后添加一个div。我的问题是第一个元素是span。

我想这样：

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
</ul>

但我明白这样：

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
  <li></li>
  <div class="clearfix"></div>
  <li></li>
</ul>

这是我使用的JQuery代码：

$(document).ready(function(){
    $(".timeline li:nth-child(2n)").add('.timeline li:last').after("<div class='clearfix'></div>");
})

Answer 1

您必须将+1添加到2n。

$(".timeline li:nth-child(2n+1)")

<强>演示

$(document).ready(function(){
    $(".timeline li:nth-child(2n+1)").add('.timeline li:last').after("<div class='clearfix'>added div</div>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

您可以使用:nth-of-type选择器。

＆＃13;

$(".timeline li:nth-of-type(2n)")
  .add('.timeline li:last')
  .after("<div class='clearfix'></div>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="timeline">
  <span class="topbullet"></span>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

每隔一个元素后添加元素

2 个答案: