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

JQuery: adding items to list and keeping count of items

本文关键字：项目 保留 列表 添加 JQuery      更新时间：2023-09-26

我有一个项目列表（为此我只包含一个），我正在尝试将更多项目添加到我的列表中。 虽然我可以在列表末尾插入一个新项目，但我无法设置要设置的 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>

将 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。

您没有计算每次点击的计数或者如果您不打算删除它们，则可以将其递增 1

请参阅以下示例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 +"'>"
))))})});
或者，

您可以在追加之前添加count++

JS小提琴

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>

相关文章：