2010-05-05 35 views
2

我試圖用不同的hrefs創建一個數組,然後附加到5個單獨的元素。hrefs的Javascript數組

這是我的代碼:

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

正如你可以看到我試圖從陣列到我的網頁的末尾添加這些項目等各個環節將採取用戶對頁面的不同部分。但我一直無法做到這一點。有沒有辦法創建具有不同鏈接的元素?

我是新來的JavaScript,所以我很抱歉,如果這並沒有很大的意義。如果有人對我在這裏問的問題感到困惑,我可以嘗試澄清一下,如果我得到一些反饋。

我想輸出的代碼是:

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

這是類似什麼我得到,但是當我申請的是安德烈descalzo已經提供了修復,我的列表元素的每一個重複自己的5倍。

任何解決方案將不勝感激。

感謝,

傑森

+0

爲什麼不把它直接放到你的html文件中? – 2010-05-05 16:30:49

回答

1

這樣的事情?:

*編輯II *發表評論

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

    }); 

我看見你的代碼的文件「中easySlider1.7 .js',並且你在123行的'for'中包含代碼'var link = ['strategy',''應該在'之後'爲'

+0

嗨, 感謝您的迴應。此方法適用於追加鏈接。但是,它正在創建我的每個列表元素5次。有想法該怎麼解決這個嗎。 再次非常感謝你的幫助。 Jason – Jason 2010-05-05 17:36:45

+0

您共創建25個鏈接。你調用五次變量「鏈接」? – 2010-05-05 17:51:48

+0

讓我試着更清楚地解釋。我只想調用變量鏈接1次。創建5個不同的鏈接。這看起來像是http://www.perksconsulting.com/dev/index.php。我正在嘗試向底部的5個圖標中的每一個附加不同的href。這些hrefs是5個鏈接.. link1,link2等 使用你的方法,我可以追加我想要的圖標的hrefs,但它創建每個圖標5次,當我只希望他們每一次。 謝謝你的幫助。 – Jason 2010-05-05 18:29:45

4

我不知道你想要什麼,因爲在你的代碼中的一些不確定的價值觀和語法錯誤,但這裏是如何創建數組中的元素,並添加到現有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'); 
    }); 
}); 

與現有ul元件,它產生:

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

(代替數組文本[...]當然,你可以使用一個數組變量。)