Precautions for spaces in the jQuery Selector

There seems to be no difference between free space and no space in the jquery selector, but there is no space in the actual application. Next I will introduce the difference between spaces in the jQuery selector.

 

First, let's explain what it means to have a space in the selector. If the two elements in the selector are separated by spaces, they are the descendant elements of the previous element. For example, $ ('div: Den den ') indicates all the hidden elements in the div. This hidden element can be a child element of the div or a child element of the div child element. If there is no space in the selector, it indicates a and relation. If $ ('div: Den den '), it indicates all hidden Divs, this has nothing to do with the element hierarchy!

Here is an example: HTML code section.
<Div>
<Div style = "display: none;"> aa </div>
<Div style = "display: none;"> bb </div>
<Div style = "display: none;"> cc </div>
<Div style = "display: none;"> dd </div>
</Div>
<Div style = "display: none;"> ee </div>
<Div style = "display: none;"> ff </div>

JQuery Section

Var $ ta = $ ('. test: Den den '); // a space selector indicates all the hidden elements in the element whose class is test. Obviously, the result is all the elements in the first div.
Var $ tb = $ ('. test: Den den '); // a selector without spaces, indicating that the class is test and a hidden element, this refers to the last child element in the last two divs and the first Divs.
Alert ($ ta. length); // The output is 4
Alert ($ tb. length); // The output is 3

The space issue in the jQuery selector cannot be ignored. Therefore, you must clarify the concept during development to see if spaces are required.

Summary

There are two jQuery expressions:

$ (". Active: hidden") A space selector, indicating the descendant selector. Select All hidden sub-objects with the style active.

$ (". Active: hidden") a selector without spaces, indicating filtering. Select an object with the style active and hidden.