According to the DOM tree, the outermost element is the parent of all elements inside of it. Therefore, the HTML elements inside of the outer element are children. The jQuery .children()
method allows us to target these elements.
<div class='parent' id='holder'> <div>Child <span>1</span></div> <div>Child <span>2</span></div> <div>Child <span>3</span></div> </div>
const $kids = $('#holder').children(); $kids.on('click', event => { $(event.currentTarget).css('border', '1px solid black'); });
In the example above, the $kids
variable refers to all children of the element with id 'holder'
(the divs inside '#holder'
). The .on()
method adds the click
event handler to these $kids
. When one of them is clicked, jQuery will add a border
around it that is 1px
wide and solid black
.
It is important to note that only the direct descendants of '#holder'
are considered children. Any elements inside the child elements of '#holder'
, such as the <span>
elements, will not be targeted by the .children()
method.
Instructions
Within the click event handler on the '.shoe-details li'
selector, target the children of the '.shoe-details'
elements.
Use .removeClass()
to remove the 'disabled'
class from the targeted children.
When you select a shoe size, this jQuery activates the ADD TO CART button.