javascript - 如何为给定数组创建跨度列表

Question

假设我有一个看起来像这样的对象：

var users = ['user1', 'user2'];

对于这个对象，我想创建一个像这样的跨度列表：

"<span>user1</span><span>user2</span>"

我确实尝试了以下代码

$('<span/>').text(users); 

但它不能正常工作，有什么想法吗？

Answer 1

这会起作用：

var users = ['user1', 'user2'];

$.each(users, function() {
    $("<span>", { text : this }).appendTo("body");
});

Answer 2

您也可以使用以下Array.map方法：

['user1', 'user2'].map(
    function(a){
        $('<span/>').html(a).appendTo($('body')); return a;
    }
);

甚至更短：

$(['user1','user2'].map(function(a){return '<span>'+a+'</span>'}).join(''))
 .appendTo('body');

甚至Array.filter;)

['user1', 'user2'].filter(
    function(a){
        $('<span/>').html(a).appendTo($('body')); return true;
    }
);

或者jQuery.each在从 Array 派生的 jQuery 对象上

$(['user1', 'user2']).each(
    function(i,a){
        $('<span/>').html(a).appendTo($('body')); return true;
    }
);

Answer 3

假设users应该只包含字符串，试试这个：

var users = ['user1', 'user2'];
for (var i = 0; i < users.length; i++) {
    $("<span />").text(users[i]).appendTo("body");
};

示例小提琴