如何在jQuery中向UL中添加「X」量的LI

我正在使用jQuery;我需要能夠根據數據屬性附加多個LI。我的HTML看起來像這樣：腳本運行時它會吐出HTML，看起來像這樣如何在jQuery中向UL中添加「X」量的LI

<div class="col"> 
    <ul class="wonda" data-tick="2"></ul> 
    <ul class="panary" data-tick="5"></ul> 
</div> 

<div class="col"> 
    <ul class="wonda" data-tick="3"></ul> 
    <ul class="panary" data-tick="4"></ul> 
</div>

後：

<div class="col"> 
    <ul class="wonda" data-tick="2"> 
      <li></li> 
      <li></li> 
    </ul> 
    <ul class="panary" data-tick="3"> 
      <li></li> 
      <li></li> 
      <li></li> 
    </ul> 
</div> 

<div class="col"> 
    <ul class="wonda" data-tick="1"> 
      <li></li> 
    </ul> 
    <ul class="panary" data-tick="2"> 
      <li></li> 
      <li></li> 
    </ul> 
</div>

我一直在使用附加的數據屬性，但我越來越行不通嘗試。有沒有更好的方法來做到這一點，或者有沒有人有任何想法？

來源

2014-03-27 doitliketyler

比什麼更好？你可以分享你嘗試過的JS嗎？ –

像這樣的東西會工作剛拿到ATTR數據蜱和做一個循環創建元素

$("ul").each(function(){ 
     var li = parseInt($(this).attr("data-tick")) 
     for(i = 0; i < li; i++){ 
     //Create an li and append it to this = ul element 
     $("<li/>").appendTo(this) 
     } 
    })

Fiddle

來源

2014-03-27 19:54:01

不錯！感謝您的快速響應。這工作完美無缺:) – doitliketyler

像這樣的事情應該工作，而不需要修改HTML：

function appendToUl(){ 
    $('.col').find('ul').each(function(){ 
     var $self = $(this), 
      len = $self.data('tick'); // no need to parseInt, .data() autocasts 

     for(var i = 0; i < len; i++){ 
      $self.empty().append('<li/>'); 
     } 
    }); 
}

然後調用該函數，當您需要。 .empty()這一塊是如果你想多次調用函數，就像重置函數一樣......如果你只調用它一次，你可以刪除它。

來源

2014-03-27 19:53:50 PlantTheIdea

如何在jQuery中向UL中添加「X」量的LI

回答

相關問題