如何使用 jQuery 检查元素 selected/clicked 是否是 "n" 的倍数？

Question

我在 ul 中有 'n' li 个元素。我只想在 li selected/clicked 是 "n" 的倍数（假设为 3）时提醒消息。

在下面的示例中，仅当我单击第 3、6 和 9 个 li 元素时才必须显示警报：

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

Answer 1

您可以在 index() 的帮助下使用模数 % 来获取 clickd 的索引 li。

我们应该添加 1 因为索引是从零开始的：

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

片段：

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.com/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>

Answer 2

你可以尝试使用这个：

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")
  }
})

演示

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.com/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>

或者您可以使用 $(ul li:nth-child(3n)).click() 它会取每三个元素。

Answer 3

这里，我们也可以使用nth-child。

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

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

Answer 4

您可以使用 :nth-of-type() 选择器

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

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

Answer 5

使用jQueryindex()

更新：直接运行这段代码应该可以满足您的要求。本例中 N=3。

这里是 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.com/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>

如何使用 jQuery 检查元素 selected/clicked 是否是 "n" 的倍数？

How to check if the element selected/clicked is multiple of "n" using jQuery?

html

javascript

jquery

css-selectors

jquery-selectors