Question

我想使用jQuery创建一个带有递增的ID和href的列表。这可能吗？

<ul id="links">
  <li><a href="#item1">Item number 1</a></li>
  <li><a href="#item2">Item number 2</a></li>
  <li><a href="#item3">Item number 3</a></li>
  <li><a href="#item4">Item number 4</a></li>
  <li><a href="#item5">Item number 5</a></li>
</ul>

<div id="toShow">
    <div id="item1" style="display:block;"></div>
    <div id="item2" style="display:none;"></div>
    <div id="item3" style="display:none;"></div>
    <div id="item4" style="display:none;"></div>
    <div id="item5" style="display:none;"></div>
</div>

这些列表项将通过循环生成，我想使用此插件http://www.bijusubhash.com/demo/show-hide-a-div-at-a-time-with-jquery/

谢谢，大卫

Answer 1

<强> HTML：

此div将包含生成的项目。您可以将这些列表附加到其他位置。

<div id="container"></div>

<强> jQuery的：

var ul = $('<ul id="links"></ul>'),  // creates an ul
        div = $('<div id="toShow"></div>'); // creates a div

    for(var i = 1; i <= 5; i++) { // loop for add item (suppose five items)
      ul.append('<li id="list_'+ i +'"><a href="#item'+ i +'">Item number '+ i +'</a></li>');
      div.append('<div id="item'+ i +'" style="display:block;">Item '+ i +'</div>');
    }

    $('#container').append(ul, div); // append those ul and div to document give life

<强> DEMO

Answer 2

我可以假设：你实际需要的东西比你想象的要简单得多：

demo link

HTML :(是的，没有自定义ID的混乱）

<ul id="links">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<div id="toShow">
    <div>First element</div>
    <div>Second element</div>
    <div>Third element</div>
    <div>Fourth element</div>
    <div>Fifth element</div>
</div>

还有几个jQuery行：

$('#toShow>div:gt(0)').hide(); // hide all but first
$('#links li').on('click',function(e){
    $('#toShow>div:eq('+$(this).index()+')').show(1700).siblings('div').stop(1).hide(1700);
    return false;
});

更多信息：
http://api.jquery.com/

增量列表项目类

2 个答案:

demo link