Jquery在html()上添加换行符答案

【问题标题】：Jquery Add Line Breaks On html()Jquery在html()上添加换行符
【发布时间】：2012-08-21 17:54:38
【问题描述】：

success: function(usernames){
           //alert(usernames); ["adam","adam","adam","adam","adam"]
           //alert(usernames.length); 36
           var participants_list= eval(usernames); //adam,adam,adam,adam,adam
           //alert(participants_list.length);5
           var username= '';
           for(var i=0; i<participants_list.length; i++){

               username += participants_list[i] + "\n";

           }
           $("#usernames").html(username);
       }
    });

我正在尝试向#usernames 添加换行符，以便每个亚当将显示在新行上，但我不知道该怎么做。谢谢。

<td><div id="usernames">cindy</div></td>

【问题讨论】：

您可以使用<br/> 通常是一种不好的做法 或以有意义的方式修改 HTML 结构：<ul id="usernames"><li>cindy</li><li>adam</li></ul> 然后您可以使用 CSS 来更改会显示出来。
如果我能以某种方式为每个“adam”创建一个新的 tr/td 会更好吗？你有什么指点吗？
您通常应该避免使用像泽西海岸这样的桌子。
这将取决于此显示的目的。一般来说，表格应该只用于表格数据。所以是的，为每个用户生成一个新行可能是合适的。如果您只是列出用户，最好使用列表。 <ul> or <ol>

标签： javascript html css line-breaks

【解决方案1】：

您需要将每个用户名包装在块级元素中，以将它们强制放在自己的单独行中。例如，

username = "<p>" + participants_list[i] + "</p>";

在你的情况下可能会更好

username = "<tr class='user'><td>" + participants_list[i] + "</td></tr>";

$("your table id or class").append(username);

【讨论】：

如果我能以某种方式为每个“adam”创建一个新的 tr/td 会更好吗？你有什么想法吗？

【解决方案2】：

不是批评你，但请允许我稍微改进你的代码：
- 尽量避免使用 eval。评估是邪恶的！相反，您应该始终尝试通过在服务器端使用 jsonencode 或序列化来返回有效数据。
- 与其构建那个 for 循环，不如在 jQuery 中使用 .each() 函数会容易得多

你的代码会变成这样：

jQuery.each(usernames, function(index, value) {
  $('#usernames').append($('<tr><td>' + value + '</td></tr>'));   
});

我在这里为你设置一个小例子：http://jsfiddle.net/YsrWs/

希望这会有所帮助！

【讨论】：

您好，很高兴有人帮助我提高编码技能。谢谢！
jep，如果你告诉 ajax 调用它应该期望 json 作为 dataType 你的 eval 应该是不需要的。