Question

我想用标签和li标签包裹输入标签。

<li><label><input type="checkbox" value="1">Apple</label></li>
<li><label><input type="checkbox" value="2">Banana</label></li>
<li><label><input type="checkbox" value="3">Orange</label></li>

但是，输出如下...

<li><label><input type="checkbox" value="1">Apple</input></label></li>
<li><label><input type="checkbox" value="2">Banana</input></label></li>
<li><label><input type="checkbox" value="3">Orange</input></label></li>

我无法删除</input>

我的代码：

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag_input = $('<input type="checkbox">');
      tag_li = $('<li>')
      tag_label = $('<label>');
  tag_input.val(foods[f]['id']);
  tag_input.text(foods[f]['name']);

  var tag = tag_li.append(tag_label.append(tag_input))
  console.log(tag[0].outerHTML);
}

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

Answer 1

您要设置text变量的tag_input，而不是tag_label。

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag_input = $('<input type="checkbox">');
      tag_li = $('<li>')
      tag_label = $('<label>');
  tag_input.val(foods[f]['id']);
  tag_label.append(tag_input);
  tag_label.append(foods[f]['name']);
  var tag = tag_li.append(tag_label);
  console.log(tag[0].outerHTML);
}

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

请注意，我已经对您的代码进行了一些重新排列，以便标签的文本位于复选框之后，如预期输出所示。基本上，先添加输入，然后添加文本。

Answer 2

一种选择是构造类似以下内容的HTML字符串：

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];
var html = "";

foods.forEach(function(o) {
  html += '<li><label><input type="checkbox" value="' + o.id + '" />' + o.name + '</label></li>';
});

console.log(html);

如果要将HTML字符串附加到<body>，则可以：

$("body").append(html);

Answer 3

您可以将文本添加到label而不是input，而将prepend添加到input：

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag_input = $('<input type="checkbox">');
      tag_li = $('<li>')
      tag_label = $('<label>');
  tag_input.val(foods[f]['id']);
  tag_label.text(foods[f]['name']);

  var tag = tag_li.append(tag_label.prepend(tag_input))
  console.log(tag[0].outerHTML);
}

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

Answer 4

您正试图将name属性作为输入文本而不是label文本，因此正在为输入添加结束标记。除了创建新元素，您还可以使用字符串创建html元素，请参见下面的代码

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag = "<li><label><input type='checkbox' value='" + foods[f]['id'] + "'>" + foods[f]['name'] +"</label></li>";
  var $tag = $(tag);
  console.log($tag.html());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Answer 5

您可以使用一行简单的代码来实现您的目标，该代码利用模板字符串和Array.prototype.reduce()方法的优势：

const src = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

const res = src.reduce((html, item) => html+=`<li><label><input type="checkbox" value="${item.id}">${item.name}</label></li>`, '');

console.log(res);

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

jQuery-如何用标签包装输入标签

5 个答案: