.html里面.html在jquery中不起作用

Question

我正在尝试使用for循环使用.append显示多个数据。 我需要通过.html函数第二次点击其他数据来替换所有数据。

这是我的代码以获得更多解释。

$(".content").html(function(){
  for(var l=1; l<4 ; l++)
    $(".content").append("Event-"+l+"<br>"+player.activity[l].desc+"<br>");
 }

假设我有以下活动json：

player : [{
"name": "Johny", 
"activity" :  [
    {"id:1","desc" : "abc"},
    {"id:2","desc" : "abc"},
    {"id:3","desc" : "abc"}
 ]
},{
"name": "Mony", 
"activity" :  [
    {"id:1","desc" : "abc"},
    {"id:2","desc" : "abc"},
    {"id:3","desc" : "abc"}
]
}]

所以基本上我想将我的Johny活动替换为mony's。

我也试过交换.html里面的.html这样的方法，但是工作正常，但.html里面的.appnd不起作用。它将Mony的数据附加到johny的数据中。

有什么建议吗？

Answer 1

.html方法中的is not allowed函数。只有字符串。

您的for应该完全按照您的意愿行事。不要放在.html的功能中

for(var l=1; l<4 ; l++)
  $(".content").append("Event-"+l+"<br>"+player.activity[l].desc+"<br>");
}

<击> 如果您要替换内容，请在.html之前使用空字符串调用for：

$(".content").html("");
for(var l=1; l<4 ; l++)
  $(".content").append("Event-"+l+"<br>"+player.activity[l].desc+"<br>");
}

---

更新

构建字符串并仅更改DOM一次更好。这将减少DOM访问。

var html = "";
for(var l=1; l<4 ; l++)
  html += "Event-"+l+"<br>"+player.activity[l].desc+"<br>";
}
$(".content").html(html);

---

更新＃2

允许使用的功能但应使用return：

$(".content").html(function(){
  var html = "";
  for(var l=1; l<4 ; l++)
    html += "Event-"+l+"<br>"+player.activity[l].desc+"<br>";
  }
  return html;
});

Answer 2

这段代码非常错误。

1）.html（）应该将参数作为字符串而不是函数。

2）玩家是阵列玩家。活动[l]赢了。

如果您想查看所有说明：以下是解决方案

for(var i=0; i<player.length ; i++){
     for(var j=0; j<player[i].length ; j++){

        $(".content").append("Event-"+j+"<br>"+player[i].activity[j].desc+"<br>");
     }
    }

Answer 3

documentation说：

  

从jQuery 1.4开始，.html()方法允许通过传入函数来设置HTML内容

所以，是的，您可以在.html()内使用一个函数。该函数必须返回一个字符串，该字符串将是元素的内容。

$(".content").html(function(){
    var content = "";
    for (var l = 1; l < 4 ; l++) {
        content += "Event-" + l + "<br>" + player.activity[l].desc + "<br>";
    }
    return content;
 });