.html中的.append在jQuery中不起作用

Question

I am trying to display multiple data using .append using for loop. I need all data to be replaced by second click to some other data by .html function.

This is my code for more explanation.

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

suppose I have activity json like below:

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"}
]
}]

So basically I want to replace my Johny's activity to mony's.

I also tried swapping the methods such as .html inside .append which is working fine but .appnd inside .html is not working. It is appending the Mony's data to johny's data.

Any suggestion?

Answer 1

Functions is not allowed in the .html method. Only strings.

Your for should do exactly what you want. Do not place inside .html 's function:

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

If you want to replace the content then just call .html with empty string before for :

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

---

UPDATE

It's better to build a string and change DOM only once. This will reduce DOM access.

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

---

UPDATE #2

Functions allowed but return should be used:

 $(".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

This code is very much buggy.

1) .html() should have parameter as string not a function.

2) Player is array player.activity[l] won't work.

If you want to see all description : following is the solution

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

The documentation says:

As of jQuery 1.4, the .html() method allows the HTML content to be set by passing in a function

So, yes, you may use a function inside .html() . The function must return a string, which will be the content of the element.

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