How do I dynamically find out what the ID or class of a div?

Question

I have a scrolling div that loading in data via ajax & json from an API as you horizontally scroll.

I currently have it working but the problem I have is that I have multiple scrolling divs on a single page. I need to let jquery know the ID of the div that is being scrolled so that the ajax can use a different API call to load in the correct data to that specific div.

Here is HTML my code:

<div id="ip-technology" class="scroll-box">
<h2>Latest Videogames Titles</h2>
    <a class="view" href="technology.html">See all</a>
    <ul class="scroll-horizontal mCustomScrollbar _mCS_3">
    <div class="mCustomScrollBox mCSB_horizontal" id="mCSB_3" style="position:relative; height:100%; overflow:hidden; max-width:100%;"><div class="mCSB_container" style="position: relative; left: 0px; width: 6721px; ">  
    <li class="product-Magazine">
        <a href="#">
            <span class="store-badge"></span>
        <img src="cover.jpg" width="124" height="166">
    </li>
           </div>

    <div class="mCSB_scrollTools" style="position: absolute; display: block; ">
    <div class="mCSB_draggerContainer" style="position:relative;">
    <div class="mCSB_dragger ui-draggable" style="position: absolute; width: 149px; ">
    <div class="mCSB_dragger_bar" style="position:relative;">
    </div></div><div class="mCSB_draggerRail"></div>
    </div></div></div>
</ul>

And here is the jquery/ajax...

 $(".scroll-horizontal").mCustomScrollbar({
        horizontalScroll:true,
        scrollEasing:"easeOutBack",
        advanced:{
            autoExpandHorizontalScroll: true
        },
        callbacks:{
            onTotalScrollOffset: 30,
            onTotalScroll: function(){                  

             var url = 'http://www.URL-TO-API.com' //Needs to somehow pass in the div id

              $.ajax({
                    type: 'GET',
                    url: url,
                    async: true,
                    jsonpCallback: 'callback',
                    dataType: 'jsonp',
                    success: function(data)
                    {

                         $.each(data.products, function(key, val)
                         {
                                if (loadNumber <= 4) {
                                     $('li.loading').before('<li class="product-ebook"><a href="product.html"><span class="store-badge"></span><img src="'+val.image+'" width="124" height="166" /><h3>'+val.title+'</h3></a></li>');
                                };
                                if (loadNumber >= 4) {
                                     $('li.loading').hide();
                                };
                         });

                          $('h3').html(function(index, currentHtml) {
                              return currentHtml.replace('Issue', '<span>Issue')
                                                .replace('Vol', '<span>Vol');
                              $(this).apppend("</span>");
                          });
                          $('.scroll-horizontal').mCustomScrollbar("update");


                    },
                    error: function() {
                        console.log('failed');
                    }
                    });
            }
        }
    });

Answer 1

the ".scroll-horizontal" class is applied to the UL item $(this).attr('id') within your code block will refer to the id of the UL element , but you want the id of the div i believe.

Try $(this).find('.mCSB_horizontal').attr('id');

which will take the UL find the div with the mCSB_horizontal then get its id.

Edit: Look into the use of 'this' and its scope.

I'm not familiar with the scroll plugin you are using but try to apply to each element in turn on load:

$(document).ready(function(){
    $(document).find('.scroll-horizontal').each(function(){
        //for each UL now find its scrolling div
        var the_div_id = $(this).find('.mCSB_horizontal').attr('id');
        //test, should spit all ids out on load
        console.log(the_div_id);

        $(this).mCustomScrollbar({
            //your code
            callbacks:{
                //your code

                //the_div_id should be valid in this scope
                //pass it via ajax property - data:the_div_id,
                //or append it to your url depending on your api
                var url = 'http://www.URL-TO-API.com' //Needs to somehow pass in the div id

            }
        });
    });
});

Answer 2

you can use

this

which will give you particular div that is being scrolled

and after that you can use

$(this).find('.mCSB_horizontal')attr('id');

to get that div's id