Блог

Главная - Вопросы по программированию - Jquery создает флажки, сгруппированные на основе атрибута

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

#jquery #checkbox

#jquery #флажок

Вопрос:

У меня есть такой массив:

 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?

Ответ №1:

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

 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);
}

Ответ №2:

         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);

        }

попробуйте это. это должно сработать, но я не проверял код, я думаю, что логика правильная

Ответ №3:

проверьте шаблоны Jquery

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