jquery n-child trouble

Question

我正在使用：nth-​​child选择器来选择某些元素

案例1：

<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>

和

案例2：

<div class='item show'>
<div class='item'>
<div class='item'>
<div class='item show'>
<div class='item'>
<div class='item'>
<div class='item show'>
<div class='item show'>

我的代码从案例1开始，并执行$（'＃outerDiv .show：nth-​​child（3n - 2）'）来选择每个第三个元素。这非常有效。然后，如果用户更改某些设置，某些元素将丢失其show类并消失在屏幕上，代码看起来像情况2.问题是现在当我执行$（'＃outerDiv .show：nth-​​child（3n） - 2）'）选择器，它仍然将它视为案例1，即使我可以在控制台中清楚地看到它的情况2.我做错了什么。对不起，我无法发布实际代码，所以我举了一个简单的例子。

感谢

Answer 1

nth-child选择器获取所有元素，无论该类如何......

使用$.each并在循环中指定类

​$('#outerDiv .show').each(function(i){
    if( i%3 === 0){
       $(this).addClass('a'); 
    }        
});​

<强> Check Fiddle

Answer 2

我将从关闭div元素开始。

而不是

<div class='item show'>

把

<div class='item show'></div>

这是一个快速演示，它选择DOM中的每个第三个（和第一个）元素： http://jsfiddle.net/robertp/hVBAC/2/

我希望它有点帮助：）

Answer 3

使用filter和css功能：

 $('#outerDiv .show').filter(function(){
    return $(this).css('display') !== 'none';
 }).filter(":nth-child(3n - 2)");

首先，将元素列表过滤到没有属性display:none的元素列表。接下来，过滤第n个孩子。