Question

我的问题是如何根据div的数量添加列表。结果将用于滑动横幅的分页/导航

<div class="panel">
  <section>
    <h2>...</h2>
    <p>...</p>
  </section>      
</div>
<div class="panel">
  <section>
    <h2>...</h2>
    <p>...</p>
  </section>      
</div>
<div class="panel">
  <section>
    <h2>...</h2>
    <p>...</p>
  </section>      
</div>

结果应该是这样的

<ul id="pagging">
  <li><a href="#">nav1</li>
  <li><a href="#">nav2</li>
  <li><a href="#">nav3</li>
</ul>

但对我们来说，我们希望它在jquery中完成。我们的jquery将首先计算div的数量，然后根据div的数量动态添加LI

Answer 1

var divCount = $("div.panel").length;

for(var i=0;i<divCount;i++){
   $("ul#pagging").append($("<li/>").text("nav"+(i+1)));
}

此外，Paging只有一个g。

http://jsfiddle.net/R8mxg/

Answer 2

使用JQuery.each

$("div.panel").each(function(idx){
      $("#pagging").append($("<li/>").text("nav"+(idx+1)));
})

注意：内部代码基于kingjiv的

Answer 3

http://jsfiddle.net/yhufH/

添加/删除div以进行测试

Jquery：根据<div> </div> </tag>的数量动态添加<tag>

3 个答案: