how to insert a new li after three each li in jquery

Question

I want to insert a li tag in after each third li tag using jquery how can we handle this. Consider the following example i have nine li items

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

@AlexBay: `I want to insert a li tag in after each third li tag` ... looks like OP forgot to add item after 9th element. — Milind Anantwar, Jan 11 '16 at 11:08
http://stackoverflow.com/questions/2932179/how-to-add-a-list-item-at-specific-position — Nutan, Apr 12 '16 at 12:05

Milind Anantwar · Accepted Answer · 2016-01-11T11:12:54.983

You can use :nth-child to target every 3,6,9...n element. and insert new content after matched elements:

$('<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>

score 0 · Answer 2 · answered Jan 11 '16 at 11:07

Try this: add li before li for which index divided by 3, see below code

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

Farhad · Answer 3 · 2016-01-11T11:18:14.700

0

try this

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

edited Jan 11 '16 at 11:18

answered Jan 11 '16 at 11:09

Farhad

104
3
17

score 0 · Answer 4 · answered Jan 11 '16 at 11:13

You can check the code below.

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

score 0 · Answer 5 · answered Jan 11 '16 at 11:13

Try this!

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

how to insert a new li after three each li in jquery

5 Answers5