Question

$(this).siblings() returns:

[<section style class=​"white">​…​</section>​
, <section style class=​"white">​…​</section>​
, <section style=​"display:​ none">​…​</section>​
, <section style=​"display:​ none">​…​</section>​
, <section style=​"display:​ none">​…​</section>​
, <section style=​"display:​ none">​…​</section>​
, <section style=​"display:​ none">​…​</section>​]

so there are 7 sections, two of which (currrently) have the class white. Once the parent() section is hidden, I can no longer use the code:

var hidden = ($(this).siblings().filter(':visible').length);

to see how many are visible, I need to count the classes that are white. after a long while, I was able to get this to work:

var hidden=0;
$(this).siblings().each(function(){
    if ($(this).hasClass('white')) {hidden++;};
});

Why am I having to loop through each sibling and cannot use one the following, or another one line to count the ones with class 'white':

var hidden = ($(this).siblings().filter(':white').length); or
var hidden = ($(this).siblings().filter('white').length);

or

var hidden = ($(this).siblings().hasClass('white').length);

or

var hidden = ($(this).siblings().is(':white').length); or
var hidden = ($(this).siblings().is('white').length);

Answer 1

Why go through the trouble of .filter(), .hasClass(), .is(), and looping? Can’t you use .sibling()‘s argument to filter the siblings instead and get those that are “white”?

$(this).siblings('.white').length