Question

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

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

应该发生的是，你应该总是看到一行中有3个项目没有间隙。

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

JS

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

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

Answer 1

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

Answer 2

nth-child选择器无法根据自定义索引工作......它基于基于兄弟元素的索引工作，因此您必须自己实现过滤，如

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

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

演示：Fiddle

Answer 3

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

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

Answer 4

这是我在代码中实现的方式，我需要在“城市”类的每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>");
}

：可见无法使用：nth-child选择器

4 个答案:

：可见无法使用：nth-​​child选择器

4 个答案:

：可见无法使用：nth-child选择器