Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Question .AddClass after element is dynamically written by script

    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:
    Code:
    <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:
    Code:
    <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:
    Code:
    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!
    Last edited by dylanbaumannn; 01-08-2013 at 08:19 PM. Reason: adding jsFiddle link

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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.

  • Users who have thanked VIPStephan for this post:

    dylanbaumannn (01-08-2013)

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Ah, frameworks are hard :p

    Quote Originally Posted by VIPStephan View Post
    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

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Thumbs up

    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.

    Code:
    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);
    });


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •