從相關div創建複選框列表

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