Jquery 增量列表项类

我想使用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>

这些列表项将通过循环生成，我想使用这个插件

谢谢， David

HTML:

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

此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

var ul=$（'
），//创建一个ul
div=$（''）；//创建一个div
对于（var i=1；i我可以假设：实际上，你需要的比你想象的要简单得多：

HTML：（是的，没有自定义ID的混乱）

更多信息：

你能告诉我们你在jquery部分尝试了什么吗？我已经看过这个解决方案，但我想在我的问题中更具体一些，因为我使用额外的jquery来实现ShowHide效果：谢谢，David。你想手动放置
元素并动态增加ID吗？你能告诉我你的答案吗？我很乐意想实现我的目标，但也了解我在做什么……还有，这可能有点幼稚，但我如何在没有任何循环的情况下在本地测试它？@DavidHaigh without loop你如何添加多个项目？我为你制作了一把小提琴，你可以在那里进行测试啊，现在这是成对的（.birds）子项按顺序排列？完全正确。正如您在“单击”时看到的，我们使用“按钮”索引：
$（this）.index（）
我们搜索要打开的同一索引子项，同时切换所有同级。@DavidHaigh要获得更好的解释，请参见：
showDIVsameIndexAsButton和hideThisDIVsiblingsDIVS
以及所有使用
：eq（）
选择器的选项。@DavidHaigh欢迎您。PS:the
.stop（1）
在代码中帮助我们防止动画累积清除动画队列，因此快速单击动画将不会累积，而是清除。我在放置时重新编辑了演示。停止（1）在错误的位置。请在脚本中相应地调整它。谢谢
$('#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;
});