我正在使用
MCustomScrollBar,但页面上有多个滚动条实例.我需要能够将.mCSB_container作为目标,动态地将< li>元素动态地附加到每个滚动条.
This本质上是同一个问题,但是接受的答案将不起作用,因为它试图使用attr来获取id,其中类没有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>
所以我尝试过使用jQuery children,但无济于事.
解决方法
要附加到您的第一个滚动条,请按ID#mCSB_1找到它并使用
child selector>到达你想要的容器,如下：
$('#mCSB_1 > .mCSB_container').append('<li class="product-tree"> New LI </li>');
并为您的第二个滚动条执行相同的操作但对于id#mCSB_2：
$('#mCSB_2 > .mCSB_container').append('<li class="product-tree"> New LI </li>');
