관련 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]+'" />') 
}