...

View Full Version : How to add child elements dynamically and listeners



m2244
09-25-2012, 09:21 PM
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.



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





/* 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("");});
}

rnd me
09-25-2012, 10:09 PM
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");



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum