jquery Gets the method of parent element node, child element node and sibling element node _jquery

This article illustrates how jquery obtains the parent element node, the child element node, and the sibling element node. Share to everyone for your reference, specific as follows:

First look at this HTML code, the entire fetch node (parent, child, sibling, etc.) method is around this code to:

<ul class= "par" >
  <li id= "Firstli" >
    
 
 

Get the JQUERY parent node:

jquery gets more parent element methods, such as parent (), parents (), closest (), Find,first-child, which can help you to find the parent node, child node, sibling node

As we use parent () to get the parent node

$ ("#dwtedx"). Parent (). Parent ()//Gets the LI node
$ ("#dwtedx") with ID Firstli. Parent (). Parent (". par"); get the top UL node
$ ("#dwtedx"). Parent (". par");
Get up the first level of the UL node above is through parent's way to get the Father node, we can according to their own project needs to choose the way ha

Below, we mainly talk about the difference between parents () and closest () two methods

1, closest from the current element to match the search, parents start matching from the parent element to find

2, closest step up to find, until found a matching element stopped, parents up until the root element, and then put these elements into a temporary set, and then use the given selector expression to filter

3, closest returns 0 or 1 elements, parents may contain 0, one, or more elements

The code can write this:

$ (' #dwtedx '). Parents ('. par ');//You can find all nodes with the. Par ('
#dwtedx '). Closest ('. par ');//You can find a parent node, the one on the top floor.

Capture of the JQUERY sibling node

jquery Sibling node acquisition, our idea is through the current node to find the parent node, and then through the parent node to find the child node, code as follows

$ (". Title"). Parent (). Find (' ul ');
Find their own brother node ul is by first find H3 and UL common parent node Li then to use Find () found UL

Another method is to use the siblings () function, the following code

$ (". Title"). Siblings (' ul ');
Find their brother node ul

Acquisition of JQUERY child nodes

Matches the first child element, which matches only one element, and this selector will match one child element for each parent element

$ (". Par:first-child");
Get the node with ID Firstli

Through the selector to get, the code is as follows:

$ (' #firstli h3.title ');
Get H3 of entry one

Use the Find () function, as mentioned above,

$ ("#firstli"). Find ("H3");
Find child sibling node H3

Use the Children () function, the following code

$ ("#firstli"). Children ("H3.title");
Gets the child node H3, class as title 

More interested readers of jquery-related content can view this site: "jquery traversal algorithm and tips summary", "jquery table (table) Operation Tips Summary", "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.