2010-12-14 108 views
2

我有一個從wordpress文章生成的ul裏邊欄。客戶端爲每個LI使用不同的圖像作爲子彈。而不是手動添加一個單獨的項目符號,是否有辦法從一組說10選項中選擇?UL中列表項的隨機(項目符號)圖像?

想着Jquery的功能?任何人都做過這個?

感謝

+0

你可以發佈你想要的一些CSS/HTML?你想改變CSS(使用'list-style-image')還是有代表子彈的'img'標籤? – 2010-12-14 16:00:52

+0

是使用css list-style-image,但爲每個li動態選擇不同的圖像。 – Driftwood 2010-12-14 17:11:52

回答

5

也許類似如下:以顯示它被應用

<style type="text/css"> 
/* Add the styles here, incrementing the number of each one as you go (then change 
    the 3 in the jQuery addClass method so it corresponds with the number of options 
    available */ 
li.bullet-0 { list-style-type: circle; } 
li.bullet-1 { list-style-type: disc; } 
li.bullet-2 { list-style-type: square; } 
</style> 
<Script type="text/javascript"> 
$(document).ready(){ 
    $('ul > li').each(function(i,e){ 
    $(this).addClass('bullet-'+(i%3)); // change 3 to number of styles that are above. 
    }); 
}); 
</script> 

的jsfiddle鏈接:http://www.jsfiddle.net/bradchristie/yxZ4m/

+0

是的,這樣的事情! :)我會一直知道LI的總數。他們會一直在改變...... – Driftwood 2010-12-14 16:50:15

+0

這實際上並不是_items_的數量,而是可用的選項數量。一旦它達到列表的末尾,它將回到開始。 (例如,項目符號0,1,2,0等)如果您需要其他方法,請告訴我,我會對其進行調整。 – 2010-12-14 17:11:01

+0

哦,男人,太棒了!謝謝。假設我可以添加一個類來指定「ul」,比如「Ul.tips」 – Driftwood 2010-12-14 17:24:14