javascript - 将不同的属性添加到相同的元素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" />';
})

演示：小提琴

Answer 2

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 3

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

Answer 4

你能检查一下这个代码吗

演示

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