JQuery создать флажки сгруппированы на основе атрибута

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

Я исправил код Канишки, чтобы он работал:

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/