jQuery - Selecting children by class using parents ID

jquery, jquery-selectors

Solution

To append to your first scrollbar locate it by the id `#mCSB_1` and use the child selector `>` to get to your desired container, like so:

$('#mCSB_1 > .mCSB_container').append('<li class="product-tree"> New LI </li>');

and for your second scrollbar do the same but for id `#mCSB_2`:

$('#mCSB_2 > .mCSB_container').append('<li class="product-tree"> New LI </li>');

Problem

I'm using the MCustomScrollBar, but have multiple instances of the scrollbar on the page. I need to be able to target `.mCSB_container` to append `<li>`elements dynamically to each of the scrollbars separately. This is the same question essentially, but the accepted answer won't work, as it's trying to get the id using `attr`, where the class doesn't have an id. ``` <div id="titles" class="scroll-box" style="opacity: 1;"> <h2>Latest Titles</h2> <ul class="scroll-horizontal mCustomScrollbar _mCS_1"> <div class="mCustomScrollBox mCSB_horizontal" id="mCSB_1" style="position:relative; height:100%; overflow:hidden; max-width:100%;"> <div class="mCSB_container" style="position: relative; left: 0px; width: 2860px;"> <li class="product-car"> My Car</li> <li class="product-bike"> My Bike </li> <li class="product-tree"> My Tree </li> </div> </div> </ul> </div> <div id="titles" class="scroll-box" style="opacity: 1;"> <h2>Latest Houses</h2> <ul class="scroll-horizontal mCustomScrollbar _mCS_2"> <div class="mCustomScrollBox mCSB_horizontal" id="mCSB_2" style="position:relative; height:100%; overflow:hidden; max-width:100%;"> <div class="mCSB_container" style="position: relative; left: 0px; width: 2860px;"> <li class="product-house"> My House</li> <li class="product-boat"> My Boat </li> <li class="product-tree"> My Tree </li> </div> </div> </ul> </div> ``` So I've tried playing around using jQuery children but to no avail.

Original source