如何用jQuery根据输入框内容添加对应数量的列表项至ul？

AI 小北

2026-6-27

解决方案

核心思路

要实现输入“3 eggs”后重复添加指定内容，需要先拆分输入中的数量和目标文本，再通过循环生成对应次数的列表项，同时修复原代码中事件绑定冗余的问题。

修改后的完整代码

<body>
  <input type="text" name="" id="txtNaam" placeholder="输入类似 3 eggs 的内容">
  <div id="divResult"></div>
  <ul></ul>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(() => {
      const txtNaam = $('#txtNaam');
      // 直接绑定回车事件，避免重复绑定
      txtNaam.on('keypress', function (e) {
        if (e.which === 13) {
          const inputVal = $(this).val().trim();
          if (!inputVal) return; // 空输入直接返回

          // 拆分输入：匹配开头的数字和后面的文本
          const matchResult = inputVal.match(/^(\d+)\s+(.*)$/);
          if (!matchResult) {
            alert("请输入类似 '3 eggs' 的格式");
            return;
          }

          const count = parseInt(matchResult[1]); // 获取数量
          const itemText = matchResult[2]; // 获取要重复的文本
          const $ul = $('ul');

          // 循环添加列表项
          for (let i = 0; i < count; i++) {
            $ul.append(`<li>${itemText}</li>`);
          }

          $(this).val(''); // 清空输入框
        }
      });
    });
  </script>
</body>

关键修改点说明

修复事件绑定：原代码在document.click内绑定keypress，会导致多次绑定事件，按回车时触发多次操作，现在直接在ready中绑定，避免冗余。
输入内容拆分：用正则表达式/^(\d+)\s+(.*)$/匹配开头的数字和后续的文本，确保能正确分离数量和内容。
有效性验证：如果输入格式不符合要求，弹出提示并终止操作，避免无效输入。
循环生成列表项：根据拆分出的数量，循环添加对应次数的<li>，内容为目标文本。
用户体验优化：添加完成后清空输入框，方便下一次输入。