[英]how to append a division to a division using jquery
我正在嘗試使用jquery的.append()
將一個分區追加到一個分區。 但是我的代碼沒有追加除法。
我的代碼是:
for(var k = 0,len=data.shareInfo.length;k<len;k += 1){
var newcommhtml = '<div id="S0'+thecid+'" class="snew">';
newcommhtml = newcommhtml + '<div class="author-image"><img src="data:image/jpeg;base64,'+data.shareInfo[k].senderPicture+'" alt="'+data.shareInfo[k].uname+'" width="100%" height="100%" class="ava"></div><span>'+data.shareInfo[k].uname+' shared the image '+data.shareInfo[k].imname+'</span>';
newcommhtml = newcommhtml + '<div class="s-content"><div class="s-message"><span>'+nl2br(data.shareInfo[k].message+'</span></div><div class="shpicture">');
newcommhtml = newcommhtml + '<img src="data:image/jpeg;base64,'+data.shareInfo[k].image+'" alt="'+data.shareInfo[k].imname+'" width="100%" height="100%" data-id="'+data.shareInfo[k].id+'" data-alid="'+data.shareInfo[k].alid+'" data-shareid="'+data.shareInfo[k].shareId+'">';
newcommhtml = newcommhtml + '</div></div>';
var thelm = "#S0"+thecid;
$('#spscrl').append(newcommhtml);
$(thelm).hide().fadeIn('slow');
var newcommhtml=null;
newcommhtml ='<div class="SPcommentbox">';
newcommhtml = newcommhtml + '<div class="comment"><div class="commenter-image">';
newcommhtml = newcommhtml +'</div><div class="commentername">';
newcommhtml = newcommhtml +'</div><div class="addcomment"><input type ="text" placeholder="Write a comment..." class="commentbox"></input></div></div>';
var selector='#S'+thecid;
$(selector).append(newcommhtml);
thecid++;
}
該代碼將能夠將divs
附加到#spscrl
。 但是它不能追加到selector
(#S+thecid)
,如果我嘗試使用即.snew
class
添加它,則追加division
。 請注意,我正在使用jQuery添加div ...
請任何人幫我解決這個問題...謝謝...
您將newcommhtml
的ID設置為S0
+ theCid
,因此首先是一個's', 然后是零 ,然后是theCid
的內容。 稍后,您嘗試重新創建該ID, 但忘記零 ! 這可以解釋為什么這種方法第一次有效,但第二次無效。
所以改變:
var selector='#S'+thecid;
進入:
var selector='#S0'+thecid; // THE ZERO!
但是我不能肯定地說不看theCid
的內容。
您的selector
變量錯誤。
另外,您還可以通過其他一些調整來提高代碼的可讀性,例如使用jQuery.each進行迭代,使用+=
運算符進行隱式化以及使用方法鏈接(例如ar thelm = $(newcommhtml).hide().appendTo('#spscrl').fadeIn('slow');
$.each(data.shareInfo, function(i, v) {
var newcommhtml = '<div id="S0' + thecid + '" class="snew">';
newcommhtml += '<div class="author-image"><img src="data:image/jpeg;base64,'
+ v.senderPicture
+ '" alt="'
+ v.uname
+ '" width="100%" height="100%" class="ava"></div><span>'
+ v.uname
+ ' shared the image ' + v.imname + '</span>';
newcommhtml += '<div class="s-content"><div class="s-message"><span>'
+ nl2br(v.message + '</span></div><div class="shpicture">');
newcommhtml += '<img src="data:image/jpeg;base64,' + v.image + '" alt="'
+ v.imname + '" width="100%" height="100%" data-id="' + v.id
+ '" data-alid="' + v.alid + '" data-shareid="' + v.shareId + '">';
newcommhtml += '</div></div>';
$('#spscrl').append(newcommhtml);
var thelm = $(newcommhtml).hide().appendTo('#spscrl').fadeIn('slow');
newcommhtml = '<div class="SPcommentbox">';
newcommhtml += '<div class="comment"><div class="commenter-image">';
newcommhtml += '</div><div class="commentername">';
newcommhtml += '</div><div class="addcomment"><input type ="text" placeholder="Write a comment..." class="commentbox"></input></div></div>';
$(newcommhtml).appendTo(thelm);
thecid++;
});
不需要兩次使用var newcommhtml
或使用newcommhtml=null
;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.