Question

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.

Answer 1

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