不同的屬性添加到相同的元素的jQuery

Question

我有這樣的事情：

<div class="controls"> 
<label class="checkbox inline"> 
<input type="checkbox" value="Boardroom" name="Form[257][]">&nbsp;Boardroom</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="Theatre" name="Form[257][]">&nbsp;Theatre</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="School" name="Form[257][]">&nbsp;School</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="U-shape" name="Form[257][]">&nbsp;U-shape</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="Coctail" name="Form[257][]">&nbsp;Coctail</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="Banquet" name="Form[257][]">&nbsp;Banquet</label> 
</div> 

我要添加圖像所以它變成了這個樣子：

<div class="controls"> 
<label class="checkbox inline"> 
<input type="checkbox" value="Boardroom" name="Form[257][]"> 
<img src='1.png'>&nbsp;Boardroom</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="Theatre" name="Form[257][]"> 
<img src='2.png'>&nbsp;Theatre</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="School" name="Form[257][]"> 
<img src='3.png'>&nbsp;School</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="U-shape" name="Form[257][]"> 
<img src='4.png'>&nbsp;U-shape</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="Coctail" name="Form[257][]"> 
<img src='5.png'>&nbsp;Coctail</label> 
<label class="checkbox inline"> 
<input type="checkbox" value="Banquet" name="Form[257][]"> 
<img src='6.png'>&nbsp;Banquet</label> 
</div> 

基本上，我需要添加不同的圖像任何人都知道如何做到這一點？提前感謝您的回覆。

Answer 1

嘗試簡單

$('.controls label input').after(function(idx){ 
    return '<img src="' + (idx + 1) + '.png" />'; 
}) 

演示：Fiddle

Answer 2

var images = ['1.png', '2.png', ...]; 
$('input:checkbox').each(function(idx, el) { 
    $(el).after("<img src='" + images[(idx + 1)] + " />"); 
}); 

Answer 3

定義每個輸入data-img="/1.jpg"，並使用此jQuery代碼：

$('.controls .checkbox input').each(function() 
{ 
    $(this).after('<img src="' + $(this).data('img') + '" />'); 
}); 

例如：

<label class="checkbox inline"><input data-img="/images/1.jpg" type="checkbox" value="Boardroom" name="Form[257][]">&nbsp;Boardroom</label> 

Answer 4

可以請你檢查這個代碼

Demo

$('.controls label input').each(function(cnt){ 
    $('<img src="' + (cnt + 1) + '.png" />').insertAfter(this) 
})