Reference child element in javascript

Question

I am using the following piece of code in order to add a class to an li item.

JavaScript

$(document).on('click', '.sidenav .page_item_has_children', function({
    $(this).addClass('side_open').siblings.removeClass('side_open')
})

As you can see It refers to the element that is clicked, in this instance an li. I need to apply this to the li's child element which is a ul so that the dropdown can appear. I assume I basically need something along the lines of the following however I can not work it out.

$(document).on('click', '.sidenav .page_item_has_children', function({
    $(child).addClass('side_open').siblings.removeClass('side_open')
})

If anyone has any ideas on how this can be done that would be great!

Thanks - Scott

If you could add sample markup with behavior, it would help – Rajesh Mar 14 '19 at 09:03 — Rajesh, Mar 14 '19 at 09:03
Why do you run the code in your function parameters? – Wimanicesir Mar 14 '19 at 09:30 — Wimanicesir, Mar 14 '19 at 09:30

thomasmalley · Answer 1 · 2019-03-14T10:15:05.723

0

Using jQuery you could try jQuery(this).find('ul') or jQuery(this).children('ul');

See also: How to get the children of the $(this) selector?

Use $(this).find('ul'); to return all ul that are descendants of the li u referenced or $(this).children('ul') to find only 1st-level descendants.

edited Mar 14 '19 at 10:15

answered Mar 14 '19 at 10:00

thomasmalley

60
10

Also what @Wimanicesir refers to is you seemingly forgot the closing bracket `)` to the [function parameters](https://www.w3schools.com/js/js_function_parameters.asp) – thomasmalley Mar 14 '19 at 10:44

Reference child element in javascript

1 Answers1