Question

给定一个包含字符串列表的数组（使用api调用获得），我想用该数组填充一个复选框列表。我正在尝试以下方法：

HTML code：

....
<div class="form-group">
    <label><lang code="Categories"></lang></label>
    <div class="checkbox" id="category-checkbox">
    </div>
    <p class="help-block"><lang code="Categories (3 max)"></lang></p>
</div>
....

javascript代码：

    ....
        for(var i = 0; i < data.length; i++){
            $('#category-checkbox').append("<label><input type=\"checkbox\"><lang code="+data[i].title+"></lang></label>");
        }
    ....

数据是字符串数组。

我的问题是为什么这不起作用。

Answer 1

如果标题有任何空格等，您将希望它被转义。更安全的是让jQuery为您处理：

for (var i = 0; i < data.length; i++) {
  var lang = $('<lang>').
    attr('code', data[i].title);

  $('<label>').
    append('<input type="checkbox">').
    append(lang).
    appendTo('#category-checkbox');
}

＆＃13;

var data = [
  { title: 'one' },
  { title: 'one two three' },
  { title: 'embedded "quotes" and <' }
];

for (var i = 0; i < data.length; i++) {
  var lang = $('<lang>').
    attr('code', data[i].title);

  $('<label>').
    append('<input type="checkbox">').
    append(lang).
    appendTo('#category-checkbox');
}

＆＃13;

lang:after {
   content: attr(code);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='category-checkbox'></div>

＆＃13;

使用jQuery填充复选框列表

1 个答案: