In this article we will show you the solution of get child element jquery, to achieve the result children() and css() methods from jquery helps you widely.
With the help of children() function anyone can point out child elements present inside selected parent element.
Then css() used to highlights the actual child's presented inside while loading program on browser.
Step By Step Guide On Get Child Element jQuery :-
In this program, first we defined parent 'div' element with one child and grandchild elements.
Using internal css styles we commonly sets some of lite shade styles.
These changes you cannot see because using children() method we applying specific styles to the child elements that helps user to get clarify with the result.
If you want to make changes you can do it in css styles that will not affects your result.
<html>
<head>
<style>
.parent * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").children().css({
"color": "red",
"border": "4px dotted red"
});
});
</script>
</head>
<body>
<div class="parent">Parent element
<p>This is first children
<span>This is grandchild</span>
</p>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- 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.
- Foremost step you have to import cdn link of jquery to get error-free result.
- We defined style block to add some common styles to all defined html elements. Its achieved by class attribute 'parent' and '*' to help you point out inside presenting elements.
- There we sets border 2px thickness, color light grey, padding 5px and margin 15px these styles respective elements initially.
- Then we provide div element definition with class attribute 'parent' and text ' Parent element' to indicate users this parent element in our program.
- As first child we defined 'p - paragraph element' with the text 'This is first children' within this created span element with text 'This is grandchild'.
- At the script block we provide actual processing codes. Specifying parent element 'div' through element name then we need to bind that with 'children()'.
- If this method really work you need some clarification right? For that reason we appending css() at last with style of red color text and dotted border for child elements.
- It start is process at the beginning stage, so you can see secondly applied styles after opening this on web browser.
- 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 we are able to know how to get child elements in jquery.
When we execute this program on webpage of browser you can see parent element in dull shade and children's in bright red color.
You can only modify these styles if you do changes on any other things not sure you can get proper result.
These are program needs internet support to expand the imported jquery package.
Whenever you are importing external files to the program you need internet support.
I hope this article on get child element jquery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
