将 jquery 数组中的值设置为跨度

Set values from jquery array to span

本文关键字:设置 jquery 数组      更新时间:2023-09-26

>我有html代码:

<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' />
<span class='at-radio-label'>topbanner</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='undermenu' />
<span class='at-radio-label'>undermenu</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topstring' />
<span class='at-radio-label'>topstring</span>

如何将 .at-radio-label 中的值替换为数组中的值,例如:

var fruit = ["111", "222", "333"];

生成的 html 代码应如下所示:

<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' />
<span class='at-radio-label'>111</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='undermenu' />
<span class='at-radio-label'>222</span>
<input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topstring' />
<span class='at-radio-label'>333</span>

遍历所有at-radio-label并将内容替换为具有相同索引的数组元素。

var fruit = ["111", "222", "333"];
$('.at-radio-label').each(function(i){
    $(this).html(fruit[i]);
})

如果您不需要知道位置,只需按相同的顺序设置值。

fruit.forEach(function(value, i) {
    var label = $(".at-radio-label")[i];
    $(label).text(value);
});

看看这种方法:

<div id="inputs">
    <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' /> <span class='at-radio-label'>topbanner</span>
    <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='undermenu' /> <span class='at-radio-label'>undermenu</span>
    <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topstring' /> <span class='at-radio-label'>topstring</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
    var fruit = ["111", "222", "333"];
    for ( var i = 0, l = fruit.length; i < l; i++ ) {
        $('#inputs span').eq(i).html(fruit[i]);
    }
</script>