Question

我有＆＃39; n＆＃39; ul里面的li元素。我想仅在li selected/clicked是＆＃34; n＆＃34;（让它为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()来获取点击li的索引。

我们应该添加1，因为索引基于零：

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

希望这会有所帮助。

＆＃13;

var n = $('ul>li').length;

$('li').click(function() {
  var currentIndex = $(this).index();

  if ( (currentIndex + 1) % n == 0) 
  {
    console.log('Alert here')
  }
})

＆＃13;

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

＆＃13;

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

Answer 3

你可以试试这个：

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 4

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

如何检查选择/点击的元素是否是＆＃34; n＆＃34;的倍数。使用jQuery？

4 个答案: