jquery - 用 li 包裹输入和标签字段

Question

我正在 ul 内动态创建标签和输入。我需要将标签和输入包装在 li 内。我尝试过wrap、append、appenTo 等。我想不通。这是代码。

const departments = $('#departments ul');

for (let i = 0; i < len; i++) {
                let num = response[i][0];
                let description = response[i][1];


                $('<input />', {type: 'checkbox', id: +num, value: description}).appendTo(departments);
                $('<label />', {'for': +num, text: description}).appendTo(departments);

            }

Answer 1

要实现此目的，您需要创建新的 li 元素，将其附加到 ul，然后附加新的 input 和 标签到li。试试这个:

const $departments = $('#departments ul');
const len = 5;

for (let i = 0; i < len; i++) {
  let num = i; // response[i][0]; // for testing only
  let description = 'Label ' + i; // response[i][1]; // for testing only

  var $li = $('<li />').appendTo($departments);
  $('<input />', {
    type: 'checkbox',
    id: +num,
    value: description
  }).appendTo($li);
  $('<label />', {
    for: +num,
    text: description
  }).appendTo($li);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="departments">
  <ul></ul>
</div>