Question

我正在尝试将类添加到只有第2个，第5个，第8个等的可见div。我找到了另一个答案（见下文），但它会为每四个项目添加一个类。我还想在隐藏后删除该类。将“i％4 == 0”更改为“i％3n-1 == 0”是否正确？

$('#test li:visible').each(function (i) {
    if (i % 4 == 0) $(this).addClass('marginLeft');
});

此外，如果div被隐藏，下面的代码会删除相同的类吗？

$('#test li:hidden').removeClass('marginLeft')

感谢您的帮助！

Answer 1

如果我是对的，你想要将该类添加到三个减去一个的倍数（2,5,8,11,14等），你可以这样做：

$('#test li:visible').each(function (i) {
    if ((i+1) % 3 == 2) $(this).addClass('marginLeft');
});

因为你想要一个小于3的倍数，这也意味着2倍于3的倍数。因此，应用模数并检查余数为2将正确应用该类。

注意i+1，因为.each函数索引是0，你需要加1才能获得实际的项目。

＆＃13;

$('#test li').each(function(i) {
  if ((i + 1) % 3 == 2) $(this).addClass('marginLeft');
});

＆＃13;

.marginLeft {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

＆＃13;

您的第二个问题的答案是肯定的，:hidden将选择具有以下其中一项的元素：

CSS显示值为none。

它们是type =＆＃34; hidden＆＃34;。
的表单元素
它们的宽度和高度明确设置为0.

隐藏了一个祖先元素，因此页面上不会显示该元素。

请参阅：https://api.jquery.com/hidden-selector/

Answer 2

以下jQuery.fn插件可使用.each()添加/删除课程并增加起始位置+=3

使用.addThisClass('marginLeft', true)添加课程。

或.addThisClass('marginLeft', false)删除课程。

jQuery.fn.addThisClass = function(c, b) {
    var a = 1; // start with 2nd index
    var e = $(this);
    e.each(function(i) {
      if (i == a) {
        if (b) $(this).addClass(c);
        else $(this).removeClass(c);
        a += 3; //increase +3
      }
    });
  }
  //to add class
$('#test li:visible').addThisClass('marginLeft', true);

//to remove class
//$('#test li:hidden').addThisClass('marginLeft', false);

.marginLeft {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id='test'>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>

Answer 3

您可以将li:visible:nth-child()选择器与参数3n

一起使用

$("#test li:visible:nth-child(3n)").addClass("marginLeft")

.marginLeft {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="test">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li hidden="hidden">5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
</ul>

仅将类添加到第2个，第5个，第8个等的可见div

3 个答案: