不同的属性添加到相同的元素的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) 
})