通過讓jQuery創建它可以簡化這個HTML嗎？

我有創建一個小氣泡的代碼。我將在即將到來的網站上提供其中幾十個，但創建div的代碼對於我想寫出來的內容來說有點太過分了，每次我想添加一個泡泡。通過讓jQuery創建它可以簡化這個HTML嗎？

我想要的是使用jQuery和.html（）屬性爲我創建大部分代碼。我仍然在學習jQuery，所以任何幫助都可以成爲我的一個很好的學習資源。

這是當前HTML：

<div id="bubbleWrapper"> 
    <div class="bubbleTop"></div> 
    <div class="bubbleText">ryan jay</div> 
</div>

我對所有這些樣式表，但它現在並不重要。

我想什麼是能夠做到的，就是當我想在頁面上添加一個泡沫，我就可以使用這樣的事情：

<div class="bubble">ryan jay</div>

而jQuery的會重新創建第一個代碼示例。這是可能的嗎？我有點失落，我會怎麼做。

感謝您的時間和幫助！

來源

2012-02-24 Ryan

你需要的jQuery方法是'each'，'wrap'和'append'。請參閱：http：//api.jquery.com/ – m90 2012-02-24 14:43:17

試試這個：

$(".bubble").each(function() { 
    $wrapper = $("<div></div>").addClass("bubbleWrapper"); 
    $top = $("<div></div>").addClass("bubbleTop"); 
    $(this).addClass("bubbleText").wrap($wrapper).before($top); 
});

注意我給包裹div一類bubbleWrapper，而不是一個id，因爲這將讓你有整個頁面的這一多個版本，而無需重複id，這將使該頁面無效。

同樣值得注意的是，如果您沒有啓用JavaScript，任何人都可以完全切斷此功能。更好的DRY原則是在你的服務器端代碼中創建一個函數，在那裏你傳遞一個字符串（在bubbleText div中使用），併爲你生成這個HTML。

來源

2012-02-24 14:42:28

這是超級有用的。如果用戶沒有啓用JS，我不擔心它無法工作，因爲它只會用於JS幻燈片。謝謝謝謝！ – Ryan 2012-02-24 14:48:53

沒問題。如果此答案對您有所幫助，請點擊左側的綠色勾號將其標記爲已接受。 – 2012-02-24 14:49:47

哦，別擔心，我會......你回答得太快了，所以我不得不等待6分鐘...... :) – Ryan 2012-02-24 14:53:35

您可以將插入，無論你想這些氣泡對象中的一個功能：

function createBubble(text, insertPoint) { 
    var elem = document.createElement("div"); 
    elem.className = "bubbleWrapper"; 
    elem.innerHTML = '<div class="bubbleTop"></div><div class="bubbleText">' + text + '</div>'; 
    insertPoint.parentNode.insertBefore(elem, insertPoint.nextSibling); 
}

注：我改變bubbleWrapper一類的名字，因爲你不能對多個對象相同的ID。

來源

2012-02-24 14:47:58 jfriend00

如果您將創建很多元素，我建議使用原生javascript。

因爲在創建dom元素時，jQuery和原生JavaScript之間存在巨大的時間差異。也許原生JavaScript的方式並不清潔，但它絕對是更快的方式。

來源

2012-02-24 14:51:14 arunes

+1對於堅持香草JS，但至少你知道jQuery的跨瀏覽器。 – 472084 2012-02-24 14:54:02

通過讓jQuery創建它可以簡化這個HTML嗎？

回答

相關問題