仅将类添加到第 2、第 5、第 8 等可见 div

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才能得到实际项目。

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

.marginLeft {
  color: red;
}

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

第二个问题的答案是肯定的，:hidden 将选择一个满足以下条件之一的元素：

• 它们的 CSS 显示值为 none。
• 它们是 type="hidden" 的表单元素。
• 它们的宽度和高度明确设置为 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>