jQuerySelecting children by class using parents ID.

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 its trying to get the id using attr , where the class does'nt 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>

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

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>');

Related Articles
You Might Also Like