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.
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.
The parent() method traverses only one level up the HTML DOM tree . The optional parameters provide additional filtering options to narrow down the traversal.
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.
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.
You can optionally include one or more selector as a parameter within the siblings() method to filter your search for the siblings.
- jQuery Interview Questions FAQ - 1
- jQuery Interview Questions FAQ - 2
- Is jQuery a programming language?
- Why do we need to go for JQuery?
- How to check jQuery version?
- How to multiple version of jQuery?
- What is jQuery CDN?
- Advantages of minified version of JQuery
- How do I check if the DOM is ready?
- How to Use the jQuery load() Method
- Difference between document.ready() and body onload()?
- What is the use of param() method?
- Difference between parent() and parents() in jQuery?
- What does jQuery data() function do?
- How do you check if an element exists or not in jQuery?
- How do I check if an HTML element is empty using jQuery?
- How to run an event handler only once in jQuery?
- How to disable/enable an element with jQuery
- Hide and show image on button click using jQuery
- Difference Between Prop and Attr in jQuery
- How do I check if an element is hidden in jQuery?
- What happen if you return false from a jQuery event handler?
- What is each() function in jQuery? How do you use it?
- Which one is more efficient, document.getElementbyId( "myId") or $("#myId)?
- What is the difference between $.map and $.grep in jQuery
- What is the use of serialize method in jQuery
- What is the use of clone method in jQuery?
- What is event.PreventDefault in jQuery?
- Difference between event.PreventDefault and event.stopPropagation?
- What are deferred and promise object in jQuery?