我们如何用一组单词填充一组<span> </span>?

时间:2014-08-16 00:39:06

标签: javascript jquery

如何用一个包含循环的单词数组填充一组<span> </span>

如果数组包含[ "one", "two", "three" ]并且被称为&#34; wordarray&#34;

然后我想填补空间,看起来像

<div id="mywords">
  <span> one </span>
  <span> two </span>
  <span> three </span>
</div>

我也在使用jQuery,

我试过了,

var index = 0;

wordarray.forEach(
 function(entry)
 {
     $("mywords").html(<span>entry</span>);
 }
 );

但我没有得到我想要的结果。

3 个答案:

答案 0 :(得分:3)

wordarray.forEach(function(entry) {
    $("#mywords").append('<span>' + entry + '</span>');
});

如果因任何原因无法删除跨度:

$('#mywords').find('span').each(function(i, el) {
    $(el).html(wordarray[i]);
});

答案 1 :(得分:1)

您可以尝试这样的事情(Live Demo):

var arr = [ "one", "two", "three" ];
$('#mywords').html('<span>' + arr.join('</span><span>') + '</span>');

这是faster而不是forEach循环。

更新:对于已有的空跨度(Example):

var arr = [ "one", "two", "three" ];
$('#mywords > span').each(function(i, el){
    $(el).html(arr[i]);
});

答案 2 :(得分:1)

var wordarray = [ "one", "two", "three" ];

创建跨度:

$('#mywords').append(wordarray.map(function (word) {
    return $('<span>').text(word);
}));

jsfiddle


如果跨度已存在:

$('#mywords span').each(function(i, span) {
    $(span).text(wordarray[i]);
});

jsfiddle