I have 'n' li elements inside a ul. I want to alert a message only if the li selected/clicked is a multiple of "n"(let it be 3).

In the below example, alert must be shown only if I click the 3rd, 6th and 9th li element:

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

I have 'n' li elements inside a ul. I want to alert a message only if the li selected/clicked is a multiple of "n"(let it be 3).

In the below example, alert must be shown only if I click the 3rd, 6th and 9th li element:

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

• javascript
• jquery
• html
• css-selectors
• jquery-selectors

• Your question says the: “alert must be shown only if I click the 3rd, 6th and 9th li,” did you mean “and” or did you mean “or”? – David Thomas Commented Nov 10, 2019 at 22:43

5 Answers 5

Here, we can use nth-child as well.

$('ul').find('li:nth-child(3n)').click(function(){
  console.log($(this).text());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

You can use :nth-of-type() selector

$('li:nth-of-type(3n)').click(function() {
  console.log('Alert here')
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

You could use the modulo % for this with the help of index() to get the index of the clickd li.

We should add 1 since the index is zero based :

if (($(this).index() + 1) % n == 0) {
    //Your logique here
}

Snippet:

var n = $('ul>li').length;

$('li').click(function() {
  var currentIndex = $(this).index();

  if ( (currentIndex + 1) % n == 0) 
  {
    console.log('Alert here')
  }
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

You can try use this:

var number = 3;
$("ul li").click(function(){
  var i = $(this).index() + 1
  if(i % number == 0) {
    console.log("You clicked on either element 3,6 or 9")
  }
})

Demo

var number = 3;
$("ul li").click(function(){
  var i = $(this).index() + 1
  if(i % number == 0) {
    console.log("You clicked on either element 3,6 or 9")
  }
})

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

Or you can use $(ul li:nth-child(3n)).click() it will take each third element.

Use jQuery index()

UPDATE : Directly running this code should satisfy your requirement. N=3 in this example.

Here is the jsfiddle.

$(document).ready(function(){
  var N = 3;
  $("ul li").click(function(){
    var index = $(this).index() + 1;
    if(index%N == 0) {
      alert("Is a multiple of "+N);
    } else {
      alert("Is not a multiple of "+N);
    }
  });
});

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