How to find the parent class name with known class in jQuery ?
Given an HTML document and the task is to get the parent class of an element with the help of given class name.
Approach 1:
- The on() method is used to select the event handler for selected elements. It means when the user clicks the button then the function call.
- The closest() method is used to return the first ancestor of the selected elements.
- Check if ancestor (parent) class exist then it returns the class name otherwise returns not exist.
Example: This example uses the closest() method to get the first matched ancestor of the element.
<!DOCTYPE html> < html > < head > < title > How to find a parent class name with a known class </ title > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 17px; font-weight: bold;" > </ p > < div class = "parent" > < div class = "child" ></ div > </ div > < button > click here </ button > < p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;" > </ p > < script > $('#GFG_UP').text('Click on the button to see result'); $('button').on('click', function() { var object = $('.child').closest('.parent'); if (object.length) { $('#GFG_DOWN').text("className = '.child'" + " with parentName = '.parent'" + " Exists"); } else { $('#GFG_DOWN').text("Not Exists"); } }); </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Approach 2:
- The on() method is used to select the event handler for selected elements. It means when the user clicks the button then the function call.
- The parent() method is used to return all ancestor of the selected elements.
- Check if ancestor (parent) class exist then it returns the class name otherwise returns not exist.
Example: This example uses the parents() method to get the all matched ancestors of the element.
<!DOCTYPE html> < html > < head > < title > How to find a parent class name with a known class </ title > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 17px; font-weight: bold;" > </ p > < div class = "parent" > < div class = "child" ></ div > </ div > < button > click here </ button > < p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;" > </ p > < script > $('#GFG_UP').text('Click on the button to see result'); $('button').on('click', function() { var object = $('.child').parents('.parent'); if (object.length) { $('#GFG_DOWN').text("className = '.child'" + " with parentName = '.parent'" + " Exists"); } else { $('#GFG_DOWN').text("Not Exists"); } }); </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.