[dylanbaumannn]

I'm having some difficulty calling an .addClass() on a dynamically created list of items which is populated after the DOM loads.

The initial HTML starts off as:

<div id="productSlider">
  <ul class="slides">
    <li data-thumb="img1.jpg"><img src="img1.jpg" width="700" /></li>
  </ul>
</div>

but after the jquery which makes it an ImgSlider hits it adds an <ol> below ul.slides with list items within it for each of the list-items generated within the ul.slides.
Since the OL is added after the DOM has finished downloading I can't do a standard .addClass() on the OL's list-items since they don't exist yet.

The HTML turns into this:

<div id="productSlider">
  <ul class="slides">
    <li data-thumb="img1.jpg"><img src="img1.jpg" width="700" /></li>
  </ul>
  <ol class="thumbs">
    <li><img src="img1.jpg" width="107" /></li>
  </ol>
</div>

I created a small interval which checks every 10th of a second until it detects that the OL has a length greater than 0, then adds a class to the OL.
But I can't quite figure out why it's not working.

Here's the jQuery snippet I made:

jQuery(function() {
    var testing_Interval = setInterval(function(){
        if(jQuery('ol.thumbs').length > 0){
            clearInterval(testing_Interval);
            jQuery('ol.thumbs').addClass('hasItems');
        }
    },100);
 });

I also created a quick jsFiddle with an example here: jsFiddle

Any help would be AMAZING because this is really frustrating. Thanks guys!