Question

我有几个项目div，左边是浮动的，所以它们看起来像是在列中。用户可以单击任何给定项目上的“隐藏”，并为该元素添加“.hide”类，该类具有display：none css。

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

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

如果单击右侧列项中的“隐藏”，则列的排序会出现故障，因为左侧列应始终具有与右侧列不同的bg颜色。我可以将隐藏的项目移动到列表的末尾，但这样做更多。

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

Answer 1

没有css选择器可以执行此操作。相反，我必须获得所有“.hide”元素并附加到包含它们的div，基本上将它们全部移到最后。如果我这样做，那么他们就不再与其他项目混在一起了。

Answer 2

使用过滤后的群组选择时，Nth-child可能违反直觉。

使用.each（）来克服其局限性：

var count = 0;
$('.item:not(.hide)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','#999')
})

Answer 3

首先，你可以说nth-child（奇数）。

其次，如果你想给它一个镜头，你可以尝试添加一个notHidden类（最初都会有），当添加'hide'时，删除'notHidden'，反之亦然。你可以在n.-child上使用.notHidden（理论上）。

正如其他人所说的那样，你现在正在做的事情不会起作用，因为nth-child不会认为它被删除了，我不确定这是否会起作用，但想想它可能会给你一个想法，如果没有其他

Answer 4

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

nth-child，除非它有一类“隐藏”

4 个答案: