Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - Selecting children by class using parents ID [closed]

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.

like image 902
BobFlemming Avatar asked Oct 25 '12 10:10

BobFlemming


People also ask

How to select child element from parent element in jQuery?

The ("parent > child") selector selects all elements that are a direct child of the specified element.

How to access child from parent in jQuery?

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.

What is the use of parent() and child() method in jQuery?

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.

How to select a child element in jQuery?

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.


1 Answers

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>');
like image 126
Nelson Avatar answered Sep 19 '22 18:09

Nelson