使用jQuery創建帶有樣式數字的編號列表？

-1

我需要在Wordpress網站中創建看起來像有色列號的有序列表。使用jQuery創建帶有樣式數字的編號列表？

我知道如何在html中手工製作。有幾種方法，但讓我們說，我通過一個無序列表，如

<li><span>1. </span>Lorem ipsum dolor sit amet</li>

我會簡單的刪除與CSS列表樣式的子彈創建一個帶編號的項目：無。

但是，我在這個網站有很多這些列表，不想編輯每個人的HTML;我寧願用Wordpress的標準OL來管理它們，這樣不懂HTML的用戶就可以創建它們。

我想我會「懸掛」數字，留有餘量和負面的文字縮進。

什麼是在jQuery中處理這種最有效的方法？

來源

2012-12-22 Steve

如果在一個頁面上有多個OL（如果只有一個列表，也可以工作）。還將爲嵌套列表的工作：

/* loop over each list so indexing of LI is done on per list basis*/ 
$("ol").each(function(){  
    $(this).children('li').each(function(index) { 
     $(this).prepend("<span>" + (index+ 1) + " </span>"); 
    });  
});

來源

2012-12-22 22:53:42 charlietfl

這很好。謝謝。 – Steve

看起來好像你在CSS前面很好，所以你正在尋找如何將span s放在列表的開頭。

如果是這樣的：

$("ol > li").each(function() { 
    var $this = $(this); 
    $this.prepend("<span>" + ($this.index() + 1) + " </span>"); 
});

或許也是在那裏加個班，這樣，如果JavaScript是沒有運行，你的無聊的老號，但如果它是你得到的風格的。

$this.addClass('styled');

Live Example | Source

附註：如果你都不可能避免使用spans和使用僞選擇:before代替或一些這樣的，這可能是在支持它的更好的瀏覽器。

來源

2012-12-22 22:45:21

可以通過使用'each'第一個參數保存指數（）''的多次調用......啊，除了剛剛意識到，爲什麼......你是唯一索引siblngs – charlietfl

@charlietfl ：不，傳遞給'each'的'index'將是集合*中的索引*。 '$ this.index（）'返回的值將是相對於兄弟*的索引*。所以如果你有一個以上的「ol」就很重要。 –

right ..這就是爲什麼我更新了我的評論 – charlietfl

使用jQuery創建帶有樣式數字的編號列表？

回答

相關問題