:visible 不适用于 :nth-child 选择器答案

【问题标题】：:visible not working with :nth-child selector:visible 不适用于 :nth-child 选择器
【发布时间】：2013-12-31 16:12:12
【问题描述】：

我有一个网格中的项目列表。其中一些通过.hide 类使用display: none; 被CSS 隐藏。

我正在尝试通过向其中添加一个类 .clear-left 来“清除”每 4 个可见项。我不明白为什么我的脚本不起作用。我正在使用 :visible 选择器，但它似乎仍在计算 display: none; 的项目。

应该发生的是，您应该始终看到 3 个项目在一行中并且没有间隙。

http://jsbin.com/ipORemIs/1/edit

HTML

<div class="grid">
  <div class="item">
    1
  </div>
  <div class="item hide">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
  <div class="item hide">
    5
  </div>
  <div class="item">
    6
  </div>
</div>

CSS

body {
  margin: 0;
}

.grid {
  margin-left: -30px;
}

/* Items that are hidden */
.hide {
  display: none;
}

.item {
  width: 150px;
  float: left;
  border: 1px solid;
  margin-left: 30px;
  margin-bottom: 30px;
  padding: 10px;
  font-size: 3em;
  text-align: center;
}

.clear-left {
  clear: left;
}

var $itemShow = $('.item:visible');

$itemShow.filter(':nth-child(3n+1)').addClass('clear-left');

【问题讨论】：

nth-child 选择器不会基于自定义索引工作...它基于基于兄弟元素的索引工作

标签： jquery css

【解决方案1】：

这就是我在代码中实现它的方式，我需要在“城市”类的每 5 个可见 div 之后显示一个 div：

var $itemShow = $('.cities:visible');
$itemShow.filter(function(i){ return (i+1) % 5 == 0; }).after(function(){return "<div>Reminded that I needed to put after every 5 divs of the class 'cities' or after the last 'cities' div if the total of divs of the class 'cities' is less than 5.</div>";});

i+1 因为第一个元素的索引为零。

在我的例子中，如果“城市”类的 div 数量小于 5，我也想显示提醒，所以我也添加了这段代码：

if($('.cities:visible').length < 5){
    $('.cities:visible').last().after("<div>Reminded that I needed to put after every 5 divs of the class 'cities' or after the last 'cities' div if the total of divs of the class 'cities' is less than 5.</div>");
}

【讨论】：

【解决方案2】：

你不能用纯 CSS 得到这个，所以把你的过滤器改成一个函数来检查项目的索引是否可以被 3 整除：

$itemShow.filter(function(i){ return i % 3 === 0; }).addClass('clear-left');

http://jsbin.com/OVewUkaM/1/edit

这使用模数运算符。当两个数字相除时，它会为您提供余数。

0 % 3;  // 0
1 % 3;  // 1
2 % 3;  // 2
3 % 3;  // 0
4 % 3;  // 1
5 % 3;  // 2
6 % 3;  // 0

编辑：但我更喜欢通过限制容器的宽度来使用纯 CSS 来做这种事情。

.grid {
  margin-left: -30px;
  width: 606px
}

http://jsbin.com/oXeGeGus/2/edit

【讨论】：

这很好用，谢谢！你能解释一下=== 0吗？我知道i % 3 是说索引是否可以被 3 整除，但是=== 0 部分是什么意思？
是的，我同意 CSS 的问题，但是当项目的高度不同并且您不想设置最小高度时，您会遇到浮动布局的问题。
@davidpauljunior - 关于最小高度的要点。有关模数运算符的说明，请参阅我的编辑。
刚刚看到您使用模运算符余数列表进行的编辑。非常清楚，非常有帮助，谢谢。

【解决方案3】：

nth-child 选择器不会基于自定义索引工作...它基于基于兄弟元素的索引工作，所以你必须自己实现过滤

var $itemShow = $('.item:visible');

$itemShow.filter(function(idx){
    return idx % 4 == 3;//because index starts with 0
}).addClass('clear-left');

演示：Fiddle

【讨论】：

你能简单解释一下idx % 4 == 3;是什么意思吗？用外行的话？我读过 % 表示“模数（除数余数）”，但这对我来说毫无意义。我明白== 3 是第四项，只是不确定idx % 4 是什么意思。
@davidpauljunior 它是Remainder 运算符...它提醒您进行除法运算，例如3 % 4 = give、4 % 4 = 0、5 % 4 = 1 ...等

【解决方案4】：

nth-child 仅适用于节点名称，不适用于任何其他类或伪类或其他任何也已应用的东西。

您必须遍历所有可见项目，并且仅在 i%4==3 时应用您的类。

【讨论】：