爲每個返回的元素獲取一個div

我有一個按鈕，它返回有關事件，名稱，日期等信息。

在腳本它看起來像這樣：

for(var i = 0; i < result.length ; i++) 
      { 
       var item = result[i];     
       $("#eventList").append("<h3>" + result.eventDate + "</h3>" + "<br>" + result.eventId + "<br>" + result.description + "<br>"); 
     }

這產生的事件列表，去一個div，在一個DIV事件阿拉。但我希望每個事件都放在一個單獨的div/box中。

任何想法？

來源

2015-05-05 emma damberg

只是包裝了''

...

串在你身邊追加。 –

您可以在div內創建它們，然後將它們全部添加到dom的末尾。

var divs = []; 
var $div; 

results.forEach(function(item){ 
    $div = $('<div></div>'); 
    $div.append("<h3>" + item.eventDate + "</h3>"); 
    $div.append("<br>"+ item.eventId); 
    $div.append("<br>"+ item.description); 
    divs.push($div); 
}); 

$("#eventList").append(divs);

來源

2015-05-05 15:10:29 Taplar

這也減少了重新繪製瀏覽器需要執行的操作。 – MugiwaraUK

您可以創建for循環內您的項目變量。當ii變得太大時，result[ii]將不確定或爲false，並且循環將停止。我更喜歡使用ii至i，因爲如果我想搜索重複循環，會更容易找到它。

每個jQuery操作都會返回它應用到的jQuery對象，因此您可以鏈接您的操作。您可以創建一個空元素，然後在下一個操作中設置其文本，以使代碼更緊湊。

for(var ii=0, item; item=result[ii]; ii++) { 
    $("#eventList") 
    .append($("<div>") 
      .append($("<h3>").text(item.eventDate)) 
      .append($("<p>").text(item.eventId)) 
      .append($("<p>").text(item.description)) 
) 
}

jsFiddle

來源

2015-05-05 15:29:45

爲每個返回的元素獲取一個div

回答

相關問題