jQuery - 使用父元素的ID选择子元素类名

Question

我正在使用MCustomScrollBar，但页面上有多个滚动条实例。 我需要能够针对.mCSB_container分别向每个滚动条动态添加 <li>元素。

这篇文章实质上是同一个问题，但是已经接受的答案不起作用，因为它尝试使用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>

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

我已经尝试使用 jQuery 的 children 方法，但是没有成功。

- BobFlemming

Answer 1

要追加到您的第一个滚动条，请通过id #mCSB_1 定位它，并使用子选择器>来获取所需的容器，如下所示：

$('#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>');

- Nelson

---

谢谢你的回答。这基本上就是我所做的。 - BobFlemming