Acquisition of sibling elements, child elements, and parent elements in jquery

We mainly summarize in jquery the sibling elements of an element, child elements and parent elements of the acquisition, the original JavaScript code for these elements of the acquisition is more cumbersome, and jquery just to encapsulate these methods, let us more convenient to get and manipulate these elements.

Methods provided by jquery

It's not a bad idea to come up with the methods provided by jquery, but we can tell from the jquery method name how these methods are done.

Parent (selector)	Find parent elements that can be passed in selector for filtering (same as below)
Parents (selector)	Find all ancestor nodes
Children (selector)	Returns all child nodes, but the method returns only the immediate child nodes and does not return all descendant nodes
Prev ()	Returns the previous sibling node of the node
Prevall ()	Returns all the nodes before the node
Next ()	Returns the next sibling node of the node
Nextall ()	Returns all nodes after the node
Siblings ()	Returns all sibling nodes of the node, no points
Find (selector)	Returns all descendant nodes of the node

After reading all the methods, we can find that: children () can only get direct child nodes, and find can get all the descendants nodes, of course, including the direct child nodes.

Let's look at a visual example of how these methods are used, "Click here»"

From the example we can see very clearly which elements are acquired by these methods, such as parent () is the direct father of the current element, and parents () is to get all the Father elements (also including their immediate parent elements). The previous methods are relatively simple to use, but here's one more: all the methods can receive a selector parameter to filter the obtained result set to really get the element we want. The use of the Find () method is what we focus here.

Explanation of the Find (selector) method

Interpretation of official documentation: a selector, jquery object, or element filter to get the descendants of each element in the currently matched set of elements.

We use this code to understand the meaning of this sentence more clearly:

$ ("#main"). Find ('. List ')    //  selector filter var $span = $ (' span '); $ (' #main '). Find ($ span);     // jquery Object Filtering var span = $ (' span ') [0];$ (' #main '). Find (span)       //  DOM element filtering

We can see from the above code that there are three ways to get the corresponding elements from all the descendants of $main. and the Find () method retrieves the descendant elements when the time-depth search takes precedence over the policy. Or take our example above, $ ('. Current ') is the present element, and then use Find () to get all descendants of that element:

From the figure above we can see that the find () Find the first. Item element, and then start retrieving the child elements in the. Item. After the child element in the S;.item is retrieved, the second. Item element is searched, and then the second. Item's child element is retrieved, and the second. Item retrieval is completed, and the third one begins. Depth-first strategy is: first to look down, the next no element to confirm whether there is a next () sibling element, if there is no sibling element, then return to the first level, confirm that this element has no sibling element, until the child element of the primary level, if the current element has a sibling element, Then proceed to the deep search from the sibling element. After all the child elements have been retrieved, the Find () method ends.

This article is short, but it is also a way to explore the use of these methods, can be seen from the examples of these methods to see what the elements are obtained.

This address: http://www.xiabingbao.com/jquery/2015/01/10/jquery-ergodic/

Acquisition of sibling elements, child elements, and parent elements in jquery