javascript - 如何在 jQuery 中将 "X"数量的 LI 添加到 UL

Question

我正在使用 jQuery；我需要能够根据数据属性 append 多个 LI。我的 html 看起来像这样:

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

脚本运行后会输出如下所示的 HTML:

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

我尝试使用带有数据属性的追加，但一无所获。有没有更好的方法来做到这一点或者有人有任何想法吗？

Answer 1

这样的事情只需获取 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