如何使用jQuery检查选择/单击的元素是不是是“n”的倍数？

Posted 2023-03-05

【中文标题】如何使用jQuery检查选择/单击的元素是不是是“n”的倍数？

【英文标题】：How to check if the element selected/clicked is multiple of "n" using jQuery?如何使用jQuery检查选择/单击的元素是否是“n”的倍数？

【发布时间】：2018-05-11 21:03:35

【问题描述】：

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>

【问题讨论】：

你的问题是：“alert must be shown only when I click the 3rd, 6th and 9th li,”你的意思是“and ”还是您的意思是“或”？

【参考方案1】：

在这里，我们也可以使用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>

【参考方案2】：

你可以使用: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>

【参考方案3】：

您可以在index() 的帮助下使用模% 来获取点击的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>

【讨论】：

count变量有什么用？

可以通过简单的:nth-child()或者:nth-of-type()选择器来实现

【参考方案4】：

你可以试试这个：

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()，它将占用每个第三个元素。

【参考方案5】：

使用 jQuery index()

更新：直接运行此代码应满足您的要求。在本例中 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>