How to Add a Class to a Child Element Using jQuery

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

Copy

<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>