Question

我有一个项目列表（为此我只包含一个），我正在尝试将更多项目添加到我的列表中。虽然我可以在列表的末尾插入一个新项目，但我无法设置ID号，它总是为0。

<script>
    var count = $("#playlist").children().length;

    $(document).ready(function(){
      $("button").click(function(){
        $("ul").append(
          $('<li>').attr('id', 'list['+ count +']').append(
            $('<div>').attr('class','item').append(
              $('<fieldset>').append(
                "<input id='list[i][name]' name='list[i][name]' type='text' class='auto' size='40' value ='NEW "+ count +"'>"
              )
            )
          )
        )
      })
    });
</script>


</head>
<body>
<div class='holder'>
   <ul id="playlist">
        <li id='list[1]' ><div class='item'><fieldset>
            <input id='list[1][name]' name='list[1][name]' type='text' class='auto' size='40' value ='one' />
        </fieldset></div></li>
   </ul>
   <br>
<button>Add new list item</button>
</div>

Answer 1

将count变量放在事件侦听器中，因此单击

时实际上会增加

$(document).ready(function() {
    $("button").click(function() {
        var count = $("#playlist").children().length;
        $("ul").append(
            $('<li>').attr('id', 'list[' + count + ']').append(
                $('<div>').attr('class', 'item').append(
                    $('<fieldset>').append(
                        "<input id='list[i][name]' name='list[i][name]' type='text' class='auto' size='40' value ='NEW " + count + "'>"
                    )
                )
            )
        )
    })
});

现在，您在文档加载前获得count，而#playlist甚至无法访问，因此计数始终为0。

Answer 2

您不必计算每次点击的计数如果您不打算将其删除，可以将其增加一个

见下面的例子 https://jsfiddle.net/ammar08429/1bLh6dqk/1/

$(document).ready(function(){
  $("button").click(function(){
  var count = $("#playlist").children().length;
    $("ul").append(
      $('<li>').attr('id', 'list['+ count +']').append(
        $('<div>').attr('class','item').append(
          $('<fieldset>').append(
            "<input id='list[i][name]' name='list[i][name]' type='text' class='auto' size='40' value ='NEW "+ count +"'>"
))))})});

Answer 3

或者，您可以在附加

之前添加count++

JS Fiddle

var count = $("#playlist").children().length;

$(document).ready(function() {
  $("button").click(function() {
    
    count++; ////////////////add this line

    $("ul").append(
      $('<li>').attr('id', 'list[' + count + ']').append(
        $('<div>').attr('class', 'item').append(
          $('<fieldset>').append(
            "<input id='list[i][name]' name='list[i][name]' type='text' class='auto' size='40' value ='NEW " + count + "'>"
          )
        )
      )
    )
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='holder'>
  <ul id="playlist">
    <li id='list[1]'>
      <div class='item'>
        <fieldset>
          <input id='list[1][name]' name='list[1][name]' type='text' class='auto' size='40' value='one' />
        </fieldset>
      </div>
    </li>
  </ul>
  <br>
  <button>Add new list item</button>
</div>

JQuery：将项目添加到列表并保留项目数

3 个答案: