Javascript array of hrefs

I am trying to create an array with different hrefs to then attach to 5 separate elements.

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 append these items from the array to the end of my page so each link will take the user to a different secti开发者_StackOverflowon of the page. But i have not been able to do this. Is there a way to to create elements with different links?

I am new to javascript so I am sorry if this doesn't make a whole lot of sense. If anyone is confused by what i am asking here I can try to clarify if I get some feedback.

The code I would Like output is:

    <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 am getting, however when I apply the fix that andres descalzo has supplied, my list elements are each repeating themselves 5 times.

Any solutions would be greatly appreciated.

Thanks,

jason

---

I'm not sure exactly what you want, as there is some undefined values and syntax errors in your code, but here is an example on how to create elements from an array and add to an existing ul element:

$(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 the existing ul element, 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>

(In place of the array literal [...] you could of course use an array variable.)

---

something like this?:

*Edit II * for comment

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're including in 'for' of the line 123 the code 'var link = [' strategy,''which should go after this 'for'