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.
The ("parent > child") selector selects all elements that are a direct child of the specified element.
jQuery children() function. jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element.
It is a jQuery Selector used to select all elements that are the direct child of its parent element. Parameter Values: parent: Using this, the parent element will be selected. child: Using this, the direct child element of the specified parent element will be selected.
children() is an inbuilt method in jQuery which is used to find all the children element related to that selected element. This children() method in jQuery traverse down to a single level of the selected element and return all elements. Here selector is the selected element whose children are going to be found.
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>');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With