Question

我有一个这样的数组：

var arr = [
            { Group: 'Fruits', Name: 'Apple' },
            { Group: 'Fruits', Name: 'Pears' },
            { Group: 'Veggies', Name: 'Tomatoes' },
            { Group: 'Veggies', Name: 'Carrots' }
          ];

我想为HTML容器中的每个组创建复选框

所以我得到这样的输出：

<div id="container">
    <h4>
        Fruits</h4>
    <ul id="Fruits">
        <li>
            <input type="checkbox" name="Apples" id="Fruits-Apples" /><label>Apples</label></li>
        <li>
            <input type="checkbox" name="Pears" id="Fruits-Pears" /><label></label>Pears</li>
    </ul>
    <h4>
        Veggies</h4>
    <ul id="Veggies">
        <li>
            <input type="checkbox" name="Tomatoes" id="Veggies-Tomatoes" /><label>Tomatoes</label></li>
        <li>
            <input type="checkbox" name="Carrots" id="Veggies-Carrots" /><label>Carrots</label></li>
    </ul>
</div>

使用jquery执行此操作的最佳方法是什么？

Answer 1

        var content = '';
        var prev = '';

        for (var arrayIndex in arr) {

           if(prev != arr[arrayIndex][0])
           {
                prev = arr[arrayIndex][0];
                content  += '<h4>'+arr[arrayIndex][0]+'</h4><ul id="'+arr[arrayIndex][0]+'"></ul>';
               $('#container').append(content);
           }

        }

        for (var arrayIndex in arr) {

        var list = '<li>'+
                      '<input type="checkbox" name="'+arr[arrayIndex][1]+'" id="'+arr[arrayIndex][0]+'-'+arr[arrayIndex][1]+'" />'+
                      '<label>'+arr[arrayIndex][1]+'</label>'+
                  '<li>';

                  $('#'+arr[arrayIndex][0]+' > ul').append(list);

        }

试试这个。这应该工作，但我没有检查代码，我认为逻辑是正确的

Answer 2

我修复了Kanishka的代码以便它可以工作：

var content = '';
var prev = '';

for (var arrayIndex in arr)
{
    if (prev != arr[arrayIndex].Group)
    {
        prev = arr[arrayIndex].Group;
        content = '<h4>' + arr[arrayIndex].Group + '</h4><ul id="' + arr[arrayIndex].Group + '"></ul>';
        $('#container').append(content);
    }
}

for (var arrayIndex in arr)
{
    var list = '<li>' +
            '<input type="checkbox"  id="' + arr[arrayIndex].Group + '-' + arr[arrayIndex].Name + '" />' +
            '<label>' + arr[arrayIndex].Name + '</label>' + '</li>';

    $('#container > ' + '#' + arr[arrayIndex].Group).append(list);
}

Answer 3

查看Jquery模板

http://api.jquery.com/tmplitem/

Jquery创建基于属性分组的复选框

3 个答案: