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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

    How to add child elements dynamically and listeners

    Hello,

    Using JS and jQuery how can I add a number of <li> elements to a <ul> tag? I want to replace all of these list items. Does jQuery have something similar to a for loop?

    I also have to add listeners to each one of them, but I might be able to tackle that one.

    Code:
    <div id="scrubber">
    		
    		<ul id="scrubberList">
    			<li><span id="First Search Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="youtubeSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="wikiSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="DrudgeSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="TownHallSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="BenelliSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="Home Search Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="DrudgeSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="TownHallSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="BenelliSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="Home Search Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="DrudgeSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="TownHallSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="BenelliSearch Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="Home Search Button" class="scrubberBtn">&#124;</span></li>
    			<li><span id="DrudgeSearch Button" class="scrubberBtn">&#124;</span></li>		
    			
    		</ul>
    		
    		</div>
    Code:
    /* This function creates listeners on the tick marks in the console page scrubber. MH */
    function createScrubberTicks(){
        $('#scrubberList')
            .click(function(){
                $(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
            })
            .mouseenter(function () {$('#page_display').html(this.id);})
            .mouseleave(function () {$('#page_display').html("");});
    }

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Code:
    function createScrubberTicks(){
        var view=$('#page_display'),
            box= $('#scrubberList'),
            timer=-1;
            
         box.delegate( "li", {
            mouseenter:function(e){ clearTimeout(timer); view.html(this.id); },
            mouseleave:function(e){ timer=setTimeout(function(){view.empty();}, 200); },
            click:     function(e){ 
                             $("li span", box).removeClass("scrubberBtn"); 
                             $("span", this).addClass("scrubberBtnSelected"); 
                        }
         });
         
    } // end createScrubberTicks()
    
    
    function addListItem(id){
        $('#scrubberList').append('<li><span id="'+id+' Button" class="scrubberBtn">|</span></li>');
        return addListItem;
    }// end addListItem()
    
    //usage:
    addListItem("TownHall2")("Drudge")("Home2");
    Last edited by rnd me; 09-25-2012 at 09:11 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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