如何使用jQuery创建多个div

Question

我觉得我非常接近完成这个.我有一个带有"添加儿童"按钮的表单,按下时会显示一个div.该表单隐藏了15个div(#child1 - #child15).我让它只显示第一行(#child1).

我的问题是,当再次按下该按钮时,下一行(#child2,#child3等等)应该出现,我不知道如何让它显示.我尝试放入柜台,但我是jQuery的新手,非常感谢任何帮助.我不认为这是一个困难的问题,只是一个躲避我新手能力的问题.

这是jQuery.如果我需要编辑或添加更多代码来帮助解决问题,请告诉我.提前致谢!

<script type="text/javascript">
var counter=0

$(document).ready(function() {
    $('#addChildren').click(function() {
        $('#child1').show(function() {
        counter++
        });
      });
    });
</script>

Answer 1

children-to-show在div中添加一个类#child1 - #child15并编写

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show:hidden').first().show();
    });
</script>

这样你就不需要一个计数器并且div id不必连续,所以你有更多的方法来配置你的div.

说明

每次单击时addChildren,children-to-show都会显示带有类的下一个隐藏元素.

编辑

gdoron是对的,所以如果你想让它适用于类:

<script type="text/javascript">
$(document).ready(function() {
    $('#addChildren').click(function() {
        $('.children-to-show').not('.is-visible').first().show().addClass('is-visible');
    });
</script>