• Skip to primary navigation
  • Skip to main content
Matthew Dunbar

Matthew Dunbar

Hire Me
  • About
  • Portfolio
  • Blog
    • General
    • HTML
    • jQuery
    • PHP
    • Optimization
  • Hire Me
You are here: Home / jQuery / How to Add a Class to a Child Element Using jQuery

How to Add a Class to a Child Element Using jQuery

February 5, 2017

The Description

One of the best features that jQuery offers is to simply add classes to elements. There’s times we’ll run into child elements with no classes and we’re unable to edit their template file. In this case, we’ll use jQuery to add a class.

The Original


<div class="parent-element">
	<div></div>
	<div></div>
	<div></div>
</div>

The jQuery



<script>
$(document).ready(function () {
	$('.parent-element').children('div').addClass('child-of-parent-element');
});
</script>

The Result


<div class="parent-element">
	<div class="child-of-parent-element"></div>
	<div class="child-of-parent-element"></div>
	<div class="child-of-parent-element"></div>
</div>


Filed Under: jQuery

Go Back: How to Remove an Element from a Page Using jQuery
Next Up: What Programs and Services Does a Web Developer Use?
© 2025 Matthew Dunbar - All Rights Reserved Back to Top