Currently, I am experimenting with enhancing the style of Alternate Visible Elements. My initial idea was to utilize the nth-child(2n+1) concept, but unfortunately it did not yield the desired results. To simplify my issue, here is a sample scenario:
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 method is not functioning as expected. Why?
I am unsure about the reason for this failure. However, I managed to devise a workaround solution using a function that achieves the desired outcome. Despite this workaround, I believe it would be more elegant and efficient if the issue can be resolved using the original approach outlined above. Below is the workaround I implemented:
function addAlternateStyle(){
var alt= true;
$('.find:visible').each(function(){
if(alt){
alt=!alt;
$(this).addClass('alternate');
}
else{
alt=!alt;
}
});
}
Any assistance on this matter would be greatly appreciated.