Создать список флажков из связанных divs

Question

Мне нужно создать число флажков на основе количества значений массива, возвращаемых из jQuery. Вот мой код:

<div class="bob" data-xyz="fish"></div> 
<div class="bob" data-xyz="dog"></div> 
<div class="bob" data-xyz="fish"></div> 
<div class="bob" data-xyz="cat"></div> 
<div class="bob" data-xyz="fish"></div> 

Ineed, чтобы отобразить значение результата в HTML так:

<label> 
    <input class="fish" type="checkbox" /> 
    fish 
</label> 
<label> 
    <input class="cat" type="checkbox" /> 
    cat 
</label> 
<label> 
    <input class="dog" type="checkbox" /> 
    dog 
</label> 

Это то, что я пробовал:

var items = {}; 
$('div.bob').each(function() { 
    items[$(this).attr('data-xyz')] = true; 
}); 

var result = new Array(); 
for(var i in items) { 
    result.push(i); 
} 
alert(result); 

Answer 1

Вы можете сделать это в двух контурах , один для создания массива элементов для создания флажков для и для создания самих флажков:

var items = $.unique($('.bob').map(function() { 
    return $(this).data('xyz'); 
}).get()); 

var html = ''; 
for (var i = 0; i < items.length; i++) { 
    html += '<label><input class="' + items[i] + '" type="checkbox" />' + items[i] + '</label>' 
} 
$('.checkboxes').append(html); 

Example fiddle

Или вы могли бы сделать это в одном цикле, создавая флажков, как вы идете:

var html = ''; 
$('.bob').each(function() { 
    var item = $(this).data('xyz'); 
    if (!$('input.' + item).length) 
     $('.checkboxes').append('<label><input class="' + item + '" type="checkbox" />' + item + '</label>'); 
}); 

Example fiddle

Бывший имеет про сделать меньше звонков в DOM, но должен сделать две петли через данные.

Answer 2

Попробуйте это:

$('div.bob').each(function() { 
    items.push($(this).attr('data-xyz')); 
}); 

//assuming containerid is the div where u want to append checkboxes 
for(int i=0;i<items.length;i++) { 
    $('#containerId').append('<input type="checkbox" name="'+ items[i]+'" />') 
}