忽略不可见元素与：在选择器中的第n个孩子

我有一个<li>元素的列表，并且我使用:nth-child来定位每个第3和第4元素的特定子元素，并给他们一个额外的类.right。忽略不可见元素与：在选择器中的第n个孩子

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

这是我使用的代码：

$(".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>

来源

2013-02-02 Berny

您的问题并不完全清楚。当你使用搜索时会发生什么？什么是您的HTML结构？你是什么意思“不能正常工作”？ –

当我使用搜索，然后添加类。右键随机工作。例如，如果元素是8，那么只有一个会得到class .right。 – Berny

什么是“搜索”？它是一个元素吗？ –

事实上，您隐藏一个元素不会改变它在DOM树中的位置，所以nth-child(4n+3)不会cha如果您隐藏任何兄弟列表项目，则为nge。

当您切换某些元素的可见性列表项时，您必须重置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-02 23:58:19 bfavaretto

一类添加到每个第n个可见的列表项的孩子，你可以先找到所有可见的列表物品，然后通过它们在集合中的排名过滤那些：

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

来源

2013-02-03 00:10:32

忽略不可见元素与：在选择器中的第n个孩子

回答

相关问题