1

我有几个带有浮动的项目 div，因此它们似乎在列中。用户可以单击任何给定项目上的“隐藏”，并为该元素添加一个“.hide”类，该元素具有 display:none css。

问：有办法.item:not(.hide):nth-child(2n+2)吗？因此，当我有一个项目列表，其中一个在中间有 .hide 时，该规则仍然适用并“忽略”该.hide项目。

jsbin 中的实时示例，http://jsbin.com/ajeqal/edit#javascript,html,live

如果您单击右侧列项目中的“隐藏”，则列会出现乱序，因为左侧列应该始终具有与右侧列不同的背景颜色。我可以将隐藏的项目移动到列表的末尾，但这需要更多的工作。

html:

<style>
  .hide { display:none;}
  .item{ float: left; width: 150px; padding: 5px; background: #ccc;}
  .item:not(.hide):nth-child(2n+1) { background: #999; margin-right:5px }
  .item a { display:inline-block; margin-left: 10px; }
  body { width: 325px; }
  #unhideAll { display: none; clear: left; margin-top: 20px;}
  #container { overflow: auto; }
</style>
<body>
  <div id="container">
  <div class="item">item<a href="#">hide</a></div>
  <div class="item">item<a href="#">hide</a></div>
  <div class="item hide">item<a href="#">hide</a></div>
  <div class="item">item<a href="#">hide</a></div>
  </div>
  <div id="unhideAll"><a href="#">Unhide All</a></div>
</body>

JS：

$('#unhideAll').click(function(e) {
  e.preventDefault();
  $(".hide").removeClass("hide");
  $(this).hide();
});

$(".item a").click(function(e) {
  e.preventDefault();
  $(this).parent().addClass("hide");
  $("#unhideAll").show();
});
4

4 回答 4

1

Nth-child 在处理组的过滤选择时可能会违反直觉。

使用 .each() 来绕过它的限制：

var count = 0;
$('.item:not(.hide)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','#999')
})
于 2012-10-26T05:02:22.020 回答
1

没有 CSS 选择器可以做到这一点。相反，我必须获取所有“.hide”元素并将它们附加到包含它们的 div 中，基本上将它们全部移到最后。如果我这样做，那么它们将不再与其他项目混合。

于 2012-06-11T20:02:20.350 回答
0

首先，您可以改为使用 nth-child(odd)。

其次，如果你想试一试，你可以尝试添加一个 notHidden 类（最初都会有），当添加 'hide' 时删除 'notHidden' ，反之亦然。然后，您可以在 .notHidden 上进行 nth-child （理论上）。

正如其他人所说，您当前的操作方式将不起作用，因为 nth-child 不认为它已被删除，而且我不确定这是否会起作用，但如果没有别的，它可能会给您一个想法。

于 2012-06-11T19:27:58.433 回答
0

你试过.item:not(.hide):nth-of-type(2n+2)吗？我将做一些测试来确认，但乍一看，它似乎可以工作。

于 2012-06-11T19:42:41.260 回答