I need to take from a certain list of div only those that are marked as hidden, that is, they have such a style = "display:none; marker. In my code, it turns out to look for hidden children, and I need to get from n elements, he indicated which of these n is hidden.

My code is:

 var blocks = $('#first, #second, #formFirst, #commentsForm, #secondLevelForm, #secondLevelFormContainer, #secondResultLevelData, .resultBtn'); var hide = blocks.find('div', ':hidden');

but there are many more divs in the hide variable, but I need only those from the list

1 answer 1

Not surprisingly, since you are using the :hidden selector. Let's read what is written about him in the documentation :

They have a CSS display value of none.
They are form elements with type = "hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so it is not shown on the page.

That is, if the element is of zero height and width, which may be because it is just empty, or because it has not yet been drawn, it will respond to this selector.

Plus, you incorrectly use find() , passing two parameters to it at once, as a result, it will find you all the c :hidden elements, and all the div , as far as I understand, but here you need to look at the jQuery code itself. Then as it is necessary to search in one query, let's say, doing find("div:hidden") .

But this will be wrong, because in the end it will give you really all the nested elements, and you will need to filter it somehow. Therefore, it is easier to use such code as below - first filter all the elements in the array through filter("div:hidden") , and then simply $.each() through $.each() .

Pay attention, we have hidden all the nested elements in the ones that you include in the blocks , and one of the actual members of this array. As a result, the message will contain only it.

 $("body").ready(function() { var blocks = $("#level1_1, #level1_2").filter("div:hidden"); $.each(blocks, function() { alert(this.id); }); }); 
 div { width: 20px; height: 20px; background: gray; } #level2_1, #level2_2, #level2_3, #level2_4 { display: none } #level1_1 { display: none } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="level1_1"> <div id="level2_1"> </div> <div id="level2_2"> </div> </div> <div id="level1_2"> <div id="level2_3"> </div> <div id="level2_4"> </div> </div> </body>