如何在jquery中的每个li之后插入一个新li答案

【问题标题】：how to insert a new li after three each li in jquery如何在jquery中的每个li之后插入一个新li
【发布时间】：2016-01-11 19:18:14
【问题描述】：

我想使用 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>

【问题讨论】：

使用克隆（）； @ganesh raj
为什么不在9元素之后？
@AlexBay: I want to insert a li tag in after each third li tag ... 看起来 OP 忘记在第 9 个元素之后添加项目了。
stackoverflow.com/questions/2932179/…

标签： jquery

【解决方案1】：

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

$('&lt;li class="sss"&gt;item inserted&lt;/li&gt;').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>

【讨论】：

【解决方案2】：

试试这个：在 li 之前添加 li 索引除以 3，见下面的代码

$(function(){
  $('ul li').each(function(i){
     if(i!=0 && i%3==0)
        $(this).before('<li class="sss">Insert here </li>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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>

【讨论】：

【解决方案3】：

您可以查看下面的代码。

<!Doctype html>
<html>
    <head>

    </head>

    <body style="margin-bottom: 100px;">
        <ul class="myUlClass">
            <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>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var couter = 1;
                $( ".myUlClass li" ).each(function() {

                    if(couter != 1 && couter%3 == 0){
                        $(this).before( '<li class="sss">item inserted</li>' );
                    }
                    couter++;
                });
            });
        </script>
    </body>
</html>

【讨论】：

【解决方案4】：

试试这个！

$(document).ready(function() {
    $(function(){
        $('ul li').each(function(i){
            var j = i +1;
            if(j!=0 && j%3==0) {
                $(this).after('<li class="sss">Insert here </li>');
            }
        });
    });
});

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：