jquery - 如何在jquery中的每个li的三个之后插入一个新的li

Question

我想使用 jquery 在每第三个 li 标签后面插入一个 li 标签，我们该如何处理这个问题。考虑下面的例子，我有九个 li 项目

 <ul>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
    <li>5 element</li>
    <li>6 element</li>
    <li>7 element</li>
    <li>8 element</li>
    <li>9 element</li>
</ul>

<ul>
  <li>1 element</li>
  <li>2 element</li>
  <li>3 element</li>
  <li class="sss">item inserted</li>
  <li>4 element</li>
  <li>5 element</li>
  <li>6 element</li>
  <li class="sss">item inserted</li>
  <li>7 element</li>
  <li>8 element</li>
  <li>9 element</li>
  <li class="sss">item inserted</li>
</ul>

Answer 1

您可以使用 :nth-child 来定位每个 3,6,9...n 元素。并在匹配的元素后插入新内容:

$('<li class="sss">item inserted</li>').insertAfter($('li:nth-child(3n+3)'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
    <li>5 element</li>
    <li>6 element</li>
    <li>7 element</li>
    <li>8 element</li>
    <li>9 element</li>
</ul>