Question

我有从数据库获取数据并在视图中显示的函数：

function GetUsers() {
  let url = "/Home/GetUsers";
  $.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    success: function(data) {
      console.dir(data);
      for (var i = 0; i < data.length; ++i) {
        $('#taskresult3').append('<b>' + data[i].UserName + "-" + data[i].RoleName + "," + '</b>');
      }
    }
  });
}

它以逗号显示，但在最后Username+RoleName之后添加了一个逗号也是。据我所知，我需要获得for循环的最后一次迭代？我该如何解决这个问题？

Answer 1

我通常会针对这种情况制作一个小技巧：

var separator = "";
for (var i = 0; i < data.length; ++i) {
  $('#taskresult3').append(separator + '<b>' + data[i].UserName + "-" + data[i].RoleName + '</b>');
  separator = ",";
}

Answer 2

只需检查当前元素是否为最后一个元素，如果是，则不要添加逗号：

$('#taskresult3').append('<b>'+ data[i].UserName +"-"+ data[i].RoleName + (i === data.length - 1 ? "" : ",")+'</b>');

Answer 3

不要为最后一个元素添加逗号。

for (var i = 0; i < data.length; ++i) {
  if (i === data.length - 1)
    $('#taskresult3').append('<b>' + data[i].UserName + "-" + data[i].RoleName '</b>');
  else
    $('#taskresult3').append('<b>' + data[i].UserName + "-" + data[i].RoleName + "," + '</b>');
}

在阵列上使用.join()还有一种方法

var _html = [];
for (var i = 0; i < data.length; ++i) {

    var _inhtml = '<b>' + data[i].UserName + "-" + data[i].RoleName+'</b>';
    _html.push(_inhtml);

}
$('#taskresult3').append(_inhtml.join(","));

通过这种方式，您可以减少多次操作DOM的开销。

Answer 4

您可以通过在数组中构建HTML，然后使用join()来显示它来避免使用逗号并改进逻辑，如下所示：

success: function(data) {
  var html = data.map(function(item) {
    return data[i].UserName + ' - ' + data[i].RoleName;
  });
  $('#taskresult3').append(html.join(',');
}

另外，请记住标记的语义用法：

但是，您不应该使用来设置文本样式;相反，您应该使用CSS font-weight属性来创建粗体文本。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

我建议您将附加的HTML放在通过CSS应用font-weight: bold的容器中。

Answer 5

您可以使用map和join来解决此问题，而不是使用循环。

$('#taskresult3').append('<b>' + data.map(item => item.UserName + "-" + item.RoleName).join(',</b><b>') + '</b>')

map会将数组转换为item.UserName + "-" + item.RoleName数组，然后使用,将此数组连接在一起，然后丢失的最后一部分是第一个{{1} }}和最后一个

不要在for循环中的最后一个元素后面写逗号

5 个答案: