.AddClass after element is dynamically written by script

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

[VIPStephan]

Please tell us about your actual intention because there is definitely some better way to do what you want. Why do you need to add a class “hasItems”? Also, you need to check for the length of the list items (children) of the ol, not the ol itself.

And your fiddle seems to work, by the way, you just need to choose the right framework.

[dylanbaumannn]

Originally Posted by VIPStephan

Please tell us about your actual intention because there is definitely some better way to do what you want. Why do you need to add a class “hasItems”? Also, you need to check for the length of the list items (children) of the ol, not the ol itself.

And your fiddle seems to work, by the way, you just need to choose the right framework.

My end intention is to add do an .addclass('NoMarginRight') to every 4th child within the ol.thumbs

[dylanbaumannn]

RESOLVED
big thanks to VIPStephan for pointing out I have to call the .length() on the li, not the ol. Got it working now! Thanks man.

jQuery(function() {
  var testing_Interval = setInterval(function(){
    if(jQuery('ol.thumbs li').length > 1){
        clearInterval(testing_Interval);
        jQuery('ol.thumbs').find(":nth-child(4n)").addClass('noMarginRight');
    }
  },100);
});