1

我有一个<li>元素列表，我用:nth-child它来定位每个 3rd 和 4th 元素的特定子元素，并给它们一个额外的 class .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>
4

2 回答 2

2

要将类添加到每个可见列表项的子项，您可以首先找到所有可见列表项，然后按它们在集合中的排名过滤它们：

$(".ilist:visible").filter(function(index){
    return (index % 4 == 0) || (index % 4 == 3);
}).find(".window").addClass("right");
于 2013-02-03T00:10:32.317 回答
1

隐藏元素这一事实不会改变其在 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/

于 2013-02-02T23:58:19.050 回答