Javascript array hrefs
I am trying to create an array with different hrefs so that I can then bind to 5 separate items.
This is my code:
var link = new Array('link1', 'link2', 'link3', 'link4', 'link5');
$(document.createElement("li"))
.attr('class',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"page.php# + 'link'\">'+ '</a>')
.appendTo($("."+ options.numericId))
As you can see, I am trying to add these elements from an array to the end of my page, so each link will take the user to a different section of the page. But I couldn't do it. Is there a way to create elements with different links?
I'm new to javascript, so I'm sorry if this doesn't make a lot of sense. If anyone is confused about what I am asking here, I can try to figure out if I am getting any kind of feedback.
The code I would like to get:
<ul class="controls">
<li class="controls1"><a href="page.php#link1"></a></li>
<li class="controls2"><a href="page.php#link2"></a></li>
<li class="controls3"><a href="page.php#link3"></a></li>
<li class="controls4"><a href="page.php#link4"></a></li>
<li class="controls5"><a href="page.php#link5"></a></li>
</ul>
Which is similar to what I get, however, when I apply the fix that andres descalzo provided, my list items are repeated 5 times.
Any decisions would be helpful.
Thanks,
jason
a source to share
something like that?:
* Edit II * for comments
var link = ['strategy', 'branding', 'marketing', 'media', 'management'],
refNumericId = $("."+ numericId);
$(link).each(function(i, el){
$("<li></li>")
.attr("id", numericId + "_" + (i+1))
.attr("class", numericId + (i+1))
.html("<a href=\"capabilities.php#"+el+"\"></a>")
.appendTo(refNumericId);
});
I saw your code in the file "easySlider1.7.js" and you included in the 'for' of lines 123 the code 'var link = [' strategy, '' which should come after this 'for'
a source to share
I'm not sure exactly what you want as there are some undefined values and syntax errors in the code, but here is an example on how to create elements from an array and append to an existing element ul
$(function(){
$.each(['link1', 'link2', 'link3', 'link4', 'link5'], function(i, link){
$('<li/>')
.append(
$('<a/>')
.attr({ 'class': 'c' + i, ref: i, href: 'page.php#' + link })
.text(link)
).appendTo('ul');
});
});
With an existing element, ul
it produces:
<ul>
<li><a class="c0" ref="0" href="page.php#link1">link1</a></li>
<li><a class="c1" ref="1" href="page.php#link2">link2</a></li>
<li><a class="c2" ref="2" href="page.php#link3">link3</a></li>
<li><a class="c3" ref="3" href="page.php#link4">link4</a></li>
<li><a class="c4" ref="4" href="page.php#link5">link5</a></li>
</ul>
( [...]
You can of course use an array variable instead of a literal array.)
a source to share