Net-informations.com
SiteMap  | About    

jQuery parent(), children() and siblings()



In an HTML document, everything is represented as a Node object . Interacting with a webpage and its resources is done using a DOM tree . The different nodes are organized in the DOM tree with parent/children/sibling relationships.

DOM traversing is one of the prominent features of the jQuery . With these traversal methods, we can go up, down, and all around the DOM tree very easily. Traversing can be broken down into three basic parts: parents, children, and siblings . To make the most it you need to understand the relationships between the elements in a DOM tree. jQuery has an abundance of easy-to-use methods for all these parts.

jQuery parent()

The jQuery parent() returns the direct parent element of the selected element. It is an inbuilt method in jQuery which is used to find the parent element related to the selected element. This method traverse a single level up the selected element and return that element. If called on a set of elements, parent returns a set of their unique direct parent elements.

Syntax

The parent() method traverses only one level up the HTML DOM tree . The optional parameters provide additional filtering options to narrow down the traversal.

example

run this source code Try it Yourself
  • Red
  • Blue

  • Green

Full Source

jQuery children()

jQuery children() method returns all direct children of each element in the set of matched elements. This method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. Also, this methos help to perform desired actions on the child elements like changing the background color, enable, disable, hide, show etc by using this method.

Syntax

example

run this source code Try it Yourself
  • Red
  • Blue

  • Green

Full Source

jQuery siblings()

The siblings() method returns a set of elements containing all of the unique siblings of each of the matched set of elements. Unlike jQuery next() and prev() methods, this method traverses both forward and backwards along the siblings of the selected element.

Syntax

You can optionally include one or more selector as a parameter within the siblings() method to filter your search for the siblings.

example

run this source code Try it Yourself
  • Red
  • Blue
  • Green

Full Source










net-informations.com (C) 2019    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.