関連する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

次の2つのループでこれを行うことができますチェックボックスを作成するためのチェックボックスを作成するアイテムの配列を作成し、チェックボックス自体を作成するためのアイテムの配列を作成します。

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への少ない呼び出しを行うのプロを持っていますデータを2回ループする必要があります。

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