添加自動遞增值li元素

IM一個css /設計師的傢伙，所以請原諒我的跛行在不知道任何的.js添加自動遞增值li元素

基本上我想知道如何自動增量ID添加到列表項與JavaScript/jquery的東西，我想添加一些CSS。

之前提前

<li id=""><a href="">Item number 1</a></li> 
<li id=""><a href="">Item number 2</a></li> 
<li id=""><a href="">Item number 3</a></li>

後

<li id="1"><a href="">Item number 1</a></li> 
<li id="2"><a href="">Item number 2</a></li> 
<li id="3"><a href="">Item number 3</a></li>

感謝，尤其是剛讀這篇

嘗試了所有的反應，一切都沒有一個普通的HTML頁面上曾與什麼，但ul/li項目。

感謝所有嘗試，我失敗的一大途徑.....我不是一個編碼器

來源

2011-05-15 ckeeley

我要給你li標籤的情況下與id涵蓋ul有您不想訂購頁面上的其他li標籤，但在jQuery中這是很容易的：

<ul id="ordered"> 
    <li><a href="">Item number 1</a></li> 
    <li><a href="">Item number 2</a></li> 
    <li><a href="">Item number 3</a></li> 
</ul>

只需將使用each方法：

$('#ordered li').each(function(i,el){ 
    el.id = i+1; 
});

我會建議使用比一個id只是一個普通的整數以外的東西了，所以或許真的如'ordered' + (i+1)而不是上面的i+1。

來源

2011-05-15 02:04:25 mVChr

混合了這兩個答案，並得到了我想要的結果....再次來自'平均喬'，不代碼 – ckeeley 2011-05-15 05:14:46

你的標籤說jQuery的，所以：

$("li").each(function(i){this.id = i})

所以，你可以學到：你使用$('foo')語法創建一個HTML節點集合。您使用CSS選擇器，因此li將在頁面上獲取-every- <li>。

.each遍歷這些收集的HTML元素，併爲它們做些什麼。 '東西'在代碼function(i){this.id = i}。 jQuery將你正在使用的函數循環傳遞給函數i，花括號內的代碼將該特定元素的ID設置爲i。

來源

2011-05-15 02:02:28

如果你需要id的樣式，這是一個壞主意。你應該做的是使用css 3僞類：nth-child（n），它位於你的css區域。

來源

2011-05-15 02:04:58

我會也可以使用CSS3'：nth-child（n）'，但是你不能依賴它在較老的瀏覽器中工作。對於可訪問性很重要的商業設計，這不是最好的方法。 – lpd 2011-05-15 02:15:30

好吧，你可以這樣說，有些人沒有啓用JS，那麼你的解決方案將不會'工作。可悲的是，沒有什麼是防彈的。 – 2011-05-15 11:55:21

真:)雖然我不確定，但我猜想，IE8（或更少）上的XP用戶數量將超過禁用JavaScript的用戶數量。雖然，如果你想盡可能安全，使用兩者都可能會訣竅;） – lpd 2011-05-15 12:00:21

我要包裝你的代碼在一個div所以它更容易代碼

<div id="increment"> 
<li><a href="">Item number 1</a></li> 
<li><a href="">Item number 2</a></li> 
<li><a href="">Item number 3</a></li> 
</div>

和JS是：

function loadcode(){ 
    var increments = document.getElementById("increment"); 
    var li = increments.getElementsByTagName("li"); 
    for (i=0;i<li.length;i++) li[i].setAttribute("id", i+1); 
}

，並在你的HTML：

<body onload="loadcode()">

來源

2011-05-15 02:09:44 Pwnna

嘗試這在一個普通的html頁面上，仍然沒有得到任何的愛。感謝您的時間 – ckeeley 2011-05-15 02:30:24

您是否試圖生成HTML，以便您可以將其粘貼到某個地方？或在頁面加載時更改它？我也改了一下代碼。 – Pwnna 2011-05-15 02:34:40

作品!!!!非常感謝你。即時通訊只適用於設計..代碼殺死我，有一個偉大的一天ultimatebuster和其他人閱讀我的困境 – ckeeley 2011-05-15 03:09:26

添加自動遞增值li元素

回答

相關問題