Question

我正致力于为替代可见元素添加样式。最初我想过使用nth-child(2n+1)想法，但显然它不起作用！为了解决我的问题，下面是样本：

HTML：

<div class='hide find'>TEST</div>
<div class='hide find'>TEST</div> 
<div class='find'>TEST</div> 
<div class='hide find'>TEST</div> 
<div class='find'>TEST</div> 
<div class='hide find'>TEST</div> 
<div class='hide find'>TEST</div> 
<div class='find'>TEST</div> 
<div class='hide find'>TEST</div> 
<div class='find'>TEST</div>

CSS：

.hide{
    display:none;
}
.alternate{
    background-color:grey;
}

Jquery的：

$('.find:visible:nth-child(2n+1)').addClass('alternate');    //This is not working! Why?

我不确定失败的原因是什么。虽然，我在问题上做了一些解决方法并创建了一个有效的功能，但是如果可以使用上述方法解决问题，那么它会更顺畅，更好。以下是我开始使用的解决方法：

function addAlternateStyle(){
var alt= true;
    $('.find:visible').each(function(){
        if(alt){
            alt=!alt;
            $(this).addClass('alternate');
        }
        else{
            alt=!alt;
        }
    });
}

感谢任何帮助。

Answer 1

你可以试试这个： -

$('.find:visible:even').addClass('alternate');

Demo

Answer 2

您可以使用此jQuery公式选择选择中的奇数/偶数元素：

$('div[class!="hide find"]:even')  

$('div[class!="hide find"]:odd')

我使用了odd / even伪类并使用“not”选择器检查了可见性（class！=“hide find”）

为什么nth-child为备用可见元素添加样式不起作用？

2 个答案: