jQuery Get Child Element By Class
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Riya
In this article we will show you the solution of jQuery get child element by class, here we needs to use children() and css() methods for achieve the result.
The children() method is used to find all the children element related to that selected element.
The css() method is used to change the style property of the selected element. So which is used to add on found element for users identification.
Step By Step Guide On jQuery Get Child Element By Class :-
Here we defined ul element with two listed items and button ‘Get Element’ for generates some process.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and we waiting for click() method’s click event occurrence which is added on button by class attribute.
Within this we specifying child element class ‘child’ by appending this with parent element ‘ul’.
<!DOCTYPE html>
<html>
<head>
<title>GET CHILD ELEMENT BY CLASS</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('.ge').click(function(){
$("ul").children(".child").css("color","blue");
});
})
</script>
</head>
<body>
<ul>
<li>Ducatti</li>
<li class="child">KTM</li>
</ul>
<button class="ge">Get Element</button>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we added click method with button element by specifying class name ‘ge’.
- Within function we specified child class name ‘.child’ on children() method then which is needs to appends with parent element ‘ul’ for refers specific child element.
- The css() method defined with values ‘color-refers property name, blue-refers property value’. For users verification we are appended css() method on got child element.
- In html block we defined ul tag with two listed items ‘Ducatti, KTM’ and button ‘Get Element’ defined with class attribute ‘ge’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to get child element by class name in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see two listed items ‘Ducatti, KTM’ and button ‘Get Element’, now user needs to clicks on it then we can see change of second list items text in blue color.
I hope this article on jQuery get child element by class helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
