無法使用jquery顯示註釋列表

只想以下面的方式顯示註釋列表，但是我的代碼有些問題，並且我無法獲得預期的結果。你能否檢查一下並幫我找出錯誤。無法使用jquery顯示註釋列表

enter image description here

我得到以下結果：

enter image description here

var item = $('<div>'); 

$.each(data.results, function(i, res) {      

    var photo = $('<div>'), 
     block1 = $('<div style="float: left;">'), 
     block2 = $('<div>'), 
     title = $('<h4>'), 
     info = $('<p>'); 

    photo.html('<img src="xyz">'); 
    title.html('<hr/>'+res.name+','+res.country); 
    info.html(res.comment_text); 
    block1.append(photo); 
    block2.append(title, info);     
    item.append(block1, block2); 

}); 

$("#comments").html(item);

來源

2014-09-12 EducateYourself

這似乎是一個清算問題。您需要清除父div。您可以輕鬆地通過添加一個clear類的項目和應用以下CSS這樣做：

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

這裏是一個test case。

如果您提供了輸出HTML並且最好是一個小提琴，它會更好。現在你迫使我們自己搞清楚了。儘可能清楚並儘可能地提出您的問題，以便人們能夠更迅速，更徹底地回答您。

來源

2014-09-12 17:46:08

首先你的選擇是壞的，你有3個瓦爾被調用同樣的事情。將此用作選擇器的指南。 jQuery Selectors此外它也將有助於知道什麼是錯誤的確切，也許粘貼一些HTML，所以我們可以更好地幫助你。

編輯：嘗試刪除block1和block2變量，並看看它看起來如何。通過這些選擇器，他們將照片和標題信息添加到第一個div。嘗試使用選擇器$（this）而不是block1和block2。

編輯2：好吧，所發生的是你的item.append（block1，block2）;部分是將您創建的塊添加到第一個div。

EDIT3：您需要創建一個新的div並添加新的模塊，以沿item.append（的行新的「項目」東西「</DIV> < DIV>」 +圖片+標題+ '）

編輯4：不知道你的html我真的不能爲你的情況寫任何代碼我只能假設和猜測。

來源

2014-09-12 16:40:49 Egregory

我剛剛更新了我的問題。請檢查一下。 – EducateYourself 2014-09-12 16:41:50

以您描述的方式嘗試過，但仍未獲得預期結果。 – EducateYourself 2014-09-12 16:55:04

我以這種方式嘗試過，但沒有結果。也許你可以編寫代碼，以便我能理解你的意思。 – EducateYourself 2014-09-12 17:02:09

你應該使用內聯樣式的樣式表，但基本上你只需要清除你正在創建的float。

變化：

var item = $('<div>');

到：

var item = $('<div style="clear:left">'),

來源

2014-09-12 16:41:49 j08691

我已經在** block1 **中使用了** float：left **。照片在div ** block1 **裏面。我也用你描述的方式編輯了我的代碼，但沒有任何改變。 – EducateYourself 2014-09-12 16:45:14

對不起，錯誤的div。嘗試清除項目var。 – j08691 2014-09-12 16:48:25

仍然沒有得到預期的佈局 – EducateYourself 2014-09-12 16:52:39

你在哪裏關閉您的元素？嘗試使用此代碼：

var item = $('<div/>'); 

$.each(data.results, function(i, res) {      

    var photo = $('<div/>'), 
     block1 = $('<div style="float: left;"></div>'), 
     block2 = $('<div/>'), 
     title = $('<h4/>'), 
     info = $('<p/>'); 

    photo.html('<img src="xyz"/>'); 
    title.html('<hr/>'+res.name+','+res.country); 
    info.html(res.comment_text); 
    block1.append(photo); 
    block2.append(title, info);     
    item.append(block1, block2); 

}); 

$("#comments").html(item);

來源

2014-09-12 17:32:09

無法使用jquery顯示註釋列表

回答

相關問題