每隔一个元素后添加元素

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

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

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

你要添加+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>