{"id":1100,"date":"2022-07-04T01:33:14","date_gmt":"2023-10-08T10:15:13","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/uncategorized\/example-of-the-jquery-parent-and-children-tree-traversal-functions\/"},"modified":"2024-03-03T04:35:33","modified_gmt":"2024-03-03T04:35:33","slug":"jquery-tree-traversal-functions","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/","title":{"rendered":"jQuery parent() and children() tree traversal functions"},"content":{"rendered":"<p>jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements. We will examine each of these jQuery tree traversal methods individually. Today, our focus will be on two of these methods, specifically parent() and children().<\/p>\n<h2>The parent() function in jQuery.<\/h2>\n<p>The jQuery parent() function retrieves the immediate ancestor of the specified HTML element. Once obtained, you can carry out desired tasks on this parent element. The following is the syntax to utilize the jQuery parent() method:<\/p>\n<ul class=\"post-ul\">\n<li>$(&#8220;child&#8221;).parent()<\/li>\n<\/ul>\n<p>This will provide the immediate ancestor of the parent element.<\/p>\n<ul class=\"post-ul\">\n<li>$(&#8220;child&#8221;).parent(\u201cfilter\u201d)<\/li>\n<\/ul>\n<p>The filter can be passed as an optional parameter to the parent() method.<\/p>\n<h3>Here&#8217;s an example illustrating the use of the jQuery parent() function:<\/h3>\n<p>Here is an instance that illustrates the usage of the parent() method in jquery-parent.html.<\/p>\n<pre class=\"post-pre\"><code>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;jQuery Traversing Parent&lt;\/title&gt;\r\n\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-2.1.1.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n$(document).ready(function(){\r\n  $(\"h4\").parent().css(\"background-color\",\"yellow\");\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;span id=\"spanParent\"&gt;Span Element - Parent of h4 element\r\n&lt;h4&gt;This is an h4 element - child of Span.&lt;\/h4&gt;\r\n&lt;\/span&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>In this instance, the<\/p>\n<h4>element is a child of the parent element . By using the parent() method, we can obtain the direct parent element, which is the element, and modify its background color. This method only traverses one level up the HTML DOM tree. Optional parameters can be used to further filter the traversal. The accompanying image demonstrates the result of the aforementioned HTML page, highlighting the yellow background color of the span element.<\/h4>\n<h2>The children() function in jQuery.<\/h2>\n<p>The children() method in jQuery allows you to retrieve the immediate child elements of a selected HTML element. It enables traversal through the child elements of the selected parent element. You can modify the child elements by altering their background color, enabling or disabling them, hiding or showing them, and more using this method. The syntax for utilizing the jQuery children() function is as follows.<\/p>\n<ul class=\"post-ul\">\n<li>$(&#8220;parentElement&#8221;).children()<\/li>\n<\/ul>\n<p>This is used with no parameters to retrieve all the immediate descendants of the parentElement.<\/p>\n<ul class=\"post-ul\">\n<li>$(&#8220;parentElement&#8221;).children(&#8220;childElement&#8221;)<\/li>\n<\/ul>\n<p>The parentElement and childElement can represent any HTML element. This function retrieves all child elements that match the parentElement. The childElement parameter in this method is not required and can be used as an optional filter to select specific child elements.<\/p>\n<h3>One possible paraphrase of the phrase &#8220;jQuery children() function example&#8221; is:<\/h3>\n<p>&#8220;An illustration of the usage of the jQuery children() function.&#8221;<\/p>\n<p>The usage of the children() method is illustrated in the following example with jquery-children.html.<\/p>\n<pre class=\"post-pre\"><code>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;jQuery Traversing Children&lt;\/title&gt;\r\n\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-2.1.1.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n$(document).ready(function(){\r\n  \/\/below code will run for all divs\r\n  $(\"div\").children(\"p\").css(\"background-color\",\"yellow\");\r\n\r\n   $(\"#spanParent\").children(\"h4\").css(\"background-color\",\"green\");\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div style=\"border:1px solid;\"&gt;\r\n&lt;h3&gt;h3 - Child of div&lt;\/h3&gt;\r\n&lt;p&gt; p -Child of div&lt;\/p&gt;\r\n&lt;span&gt; Span - Child of Div&lt;\/span&gt;\r\n&lt;p&gt;Second p - Child of div&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;p&gt; p element - Not a child of div&lt;\/p&gt;\r\n\r\n&lt;span id=\"spanParent\"&gt;\r\n&lt;h4&gt;This is an h4 element (child of Span).&lt;\/h4&gt;\r\n&lt;\/span&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>In this example, we have two parent elements:<\/p>\n<div id=\"divParent\">\n<p>and <span id=\"spanParent\">. We can use the children() method to obtain the child elements and modify the color of each element. By using the children method, we can retrieve the child element <\/span><\/p>\n<p>from the parent<\/p>\n<div>\n<p>element and change the color of all child<\/p>\n<p>elements to yellow. It&#8217;s important to note that the<\/p>\n<p>element outside the<\/p>\n<div>\n<h4>element remains unaffected by this method. Similarly, the element contains the child element<br \/>\n, whose color we also modify in this example. The children method only traverses one level down the HTML DOM tree. It is not intended for traversing text nodes. The following output is generated by the above HTML page. That&#8217;s all for examples of the jQuery parent and children functions. We will explore more jQuery traversal methods in upcoming posts.<\/h4>\n<\/div>\n<p>learn more about other like<\/p>\n<\/div>\n<p><a class=\"LinkSuggestion__Link-sc-1gewdgc-4 cLBplk\" href=\"https:\/\/www.silicloud.com\/blog\/basics-plot-function-in-r\/\" target=\"_blank\" rel=\"noopener\">Basics of Graph Plotting &#8211; Comprehending the plot() Function in R<span class=\"sc-gswNZR eASTkv\">(Opens in a new browser tab)<\/span><\/a><\/p>\n<p><a class=\"LinkSuggestion__Link-sc-1gewdgc-4 cLBplk\" href=\"https:\/\/www.silicloud.com\/blog\/tutorial-on-hibernate-tomcat-jndi-datasource\/\" target=\"_blank\" rel=\"noopener\">Tutorial on how to set up a Hibernate Tomcat JNDI DataSource.<span class=\"sc-gswNZR eASTkv\">(Opens in a new browser tab)<\/span><\/a><\/p>\n<p><a class=\"LinkSuggestion__Link-sc-1gewdgc-4 cLBplk\" href=\"https:\/\/www.silicloud.com\/blog\/spring-rest-xml-and-json\/\" target=\"_blank\" rel=\"noopener\">One example of Spring REST XML and JSON<span class=\"sc-gswNZR eASTkv\">(Opens in a new browser tab)<\/span><\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements. We will examine each of these jQuery tree traversal methods individually. Today, our focus will be on two of these methods, specifically parent() and children(). The parent() function in jQuery. The jQuery parent() function retrieves the [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1100","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery parent() and children() tree traversal functions - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery parent() and children() tree traversal functions\" \/>\n<meta property=\"og:description\" content=\"jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-08T10:15:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-03T04:35:33+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"jQuery parent() and children() tree traversal functions\",\"datePublished\":\"2023-10-08T10:15:13+00:00\",\"dateModified\":\"2024-03-03T04:35:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\"},\"wordCount\":576,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\",\"name\":\"jQuery parent() and children() tree traversal functions - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2023-10-08T10:15:13+00:00\",\"dateModified\":\"2024-03-03T04:35:33+00:00\",\"description\":\"jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery parent() and children() tree traversal functions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"jQuery parent() and children() tree traversal functions - Blog - Silicon Cloud","description":"jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/","og_locale":"en_US","og_type":"article","og_title":"jQuery parent() and children() tree traversal functions","og_description":"jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements.","og_url":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2023-10-08T10:15:13+00:00","article_modified_time":"2024-03-03T04:35:33+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"jQuery parent() and children() tree traversal functions","datePublished":"2023-10-08T10:15:13+00:00","dateModified":"2024-03-03T04:35:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/"},"wordCount":576,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/","url":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/","name":"jQuery parent() and children() tree traversal functions - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2023-10-08T10:15:13+00:00","dateModified":"2024-03-03T04:35:33+00:00","description":"jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/jquery-tree-traversal-functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery parent() and children() tree traversal functions"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/1100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=1100"}],"version-history":[{"count":4,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/1100\/revisions"}],"predecessor-version":[{"id":1623,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/1100\/revisions\/1623"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=1100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=1100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=1100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}