Question

我想在每个第三个li标签之后使用jquery插入一个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元素。并在匹配的元素后插入新内容：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

Answer 3

试试这个

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

Answer 4

您可以查看以下代码。

<!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>

Answer 5

试试这个！

$(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>');
            }
        });
    });
});

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

5 个答案: