jQuery ancestor-descendant selector uses DOM nested relational structure to find the web elements accurately. There are four types of such selectors as below. Each expression contains two selectors the first selector and the second selector. In different cases, the selector represents different hierarchy web elements.
1. jQuery Hierarchy Selector Introduction.
- ancestor-descendant: Find all descendant web elements of an ancestor. Ancestor is a valid parent web elements selector, descendant is descendant web elements selector that exists under ancestor. For example $(“form input”) will match all input web elements under Html form.
- parent > child: Find all direct child web elements under the specified parent. For example $(“form > input”) will match only the direct ( first level child ) input web elements of Html form.
- prev + next: Find the first neighbor web element ( specified by the next selector ) of the prev selector specified web element. For example $(“div + img”) will match only the first neighbor img web element after div.
- prev ~ siblings: Match all neighbor web elements of the prev selector specified web element. For example $(“div ~ img”) will return all sibling img of div. But if the img is placed before div then it will not be returned.
2. jQuery Hierarchy Selector Example.
2.1 Ancestor Descendant Selector.
- selector-ancestor-descendant.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Ancestor Descendant Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Get all input web element exist under form. var input_array = $("form input"); // Get user name input dom object. var user_name_input = input_array.get(0); // Transform dom object to jquery object. user_name_input = $(user_name_input); // Set user name web element css style through jquery object css method. user_name_input.css({color:'yellow', background:'blue'}); // Get password input dom object. var password_input = input_array[1]; // Transform dom object to jquery object. password_input = $(password_input); // Set password web element style through jquery object css method. password_input.css({border:'red 2px solid'}); }) </script> </head> <body> <form> <fieldset> <!--The first input exist under form / fieldset.--> User Name : <input type="text"/><br/> <fieldset> <!-- The second input exist under form / fieldset / fieldset. --> Password : <input type="password"/><br/> </fieldset> <button>Login</button> </fieldset> </form> </body> </html>
2.2 Parent-Child Selector.
- selector-parent-child.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Parent Child Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Change the direct child img ( image one and three ) css style with selector "div > img". $("div > img").css({border:'red solid 10px', width:'100px'}); // Change the second level child img ( image two ) css style with "div > fieldset > img" selector. $("div > fieldset > img").css({border:'green solid 10px', width:'80px'}); }) </script> </head> <body> <div> <img src="../images/green_button.jpg"/> <fieldset> <img src="../images/green_button.jpg"/> </fieldset> <img src="../images/green_button.jpg"/> </div> </body> </html>
2.3 Previous Next Selector.
- selector-previous-next.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Previous Next Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Change the first next img css style with selector "div + img". $("div + img").css({border:'red solid 10px', width:'100px'}); // Change the second next img css style with selector "div + img + img". $("div + img + img").css({border:'green solid 10px', width:'80px'}); }) </script> </head> <body> <div> <img src="../images/green_button.jpg"/> </div> <img src="../images/green_button.jpg"/> <img src="../images/green_button.jpg"/> </html>
2.4 Previous Siblings Selector.
- selector-prev-siblings.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Previous Siblings Selector Example</title> <script src="../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Change the sibling img to div's css style with selector "div ~ img". $("div ~ img").css({border:'green solid 10px', width:'80px'}); // Get all siblings image. var all_sibling = $("div ~ img"); /* Display div sibling image count in an alert. Please note the image placed before div is not sibling image.*/ alert("Will change div " + all_sibling.length + " sibling images css style."); // When click the first button. $("#change_first_sibling_image").click(function () { // Get and cast first sibling dom object to jquery object. var firstImage = all_sibling[0]; firstImage = $(firstImage); // Change first image css style. firstImage.css({border:'red solid 15px', width:'60px'}); }); // When click the second button. $("#change_second_sibling_image").click(function () { // Get and cast second sibling dom object to jquery object. var secondImage = all_sibling[1]; secondImage = $(secondImage); // Change second image style with jquery css method. secondImage.css({border:'blue solid 25px', width:'100px'}); }); }) </script> </head> <body> <img src="../images/green_button.jpg"/> <div> </div> <img src="../images/green_button.jpg"/> <img src="../images/green_button.jpg"/> <br/><br/> <button id="change_first_sibling_image">Change First Sibling Image</button> <button id="change_second_sibling_image">Change Second Sibling Image</button> </body> </html>
