Question

我有一个<li>元素的列表，我正在使用:nth-child来定位每个第3和第4个元素的特定子元素，并为它们添加一个额外的类.right。

但是，当我隐藏一些元素（比方说，第一个或第二个列表项）时，它无法正常工作。我想只为可见列表项的子项添加“right”类。我怎么能这样做？

这是我正在使用的代码：

$(".ilist:visible:nth-child(4n+3)").find(".window").addClass("right");
$(".ilist:visible:nth-child(4n+4)").find(".window").addClass("right");

我删除了所有类.right：

$(".ilist .window.right").removeClass("right");

HTML结构：

<ul>
   <li class="ilist">
      ...
      <div class="name">Name (Search works with it)</div>
      <div class="window"></div>
   </li>

   ...
</ul>

Answer 1

要向每个第n个可见列表项的子项添加一个类，您可以先查找所有可见列表项，然后按集合中的排名过滤这些项：

$(".ilist:visible").filter(function(index){
    return (index % 4 == 0) || (index % 4 == 3);
}).find(".window").addClass("right");

Answer 2

隐藏元素的事实不会改变其在DOM树中的位置，因此如果隐藏任何兄弟列表项，nth-child(4n+3)将不会更改。

当您切换一些元素列表项的可见性时，您必须重置right类，然后重新应用到相应的元素。

您可以通过将函数传递给addClass而不是新的类名来实现。此函数将接收匹配元素的索引作为第一个参数，您可以使用它来检查它是第3个还是第4个。如果是，请返回要应用的新类名：

$(".ilist .window.right").removeClass("right");
$(".ilist:visible .window").addClass(function(i, currentClass){
    return (i == 2 || i == 3) ? "right" : "";
});

http://jsfiddle.net/6TMmJ/

的现场演示

忽略不可见元素：选择器中的nth-child

2 个答案: