[英]Dynamic dom nodes with jquery
我正在嘗試使用jquery動態生成大量的html。 我無法弄清楚如何在代碼中添加嵌套循環以生成目標html(如下所示)。
<div class="daily-featured__video-social">
<ul class="share-tools__daily-featured share-tools">
<li class="share-tools__item share-tools__item--extended">
<div class="share-tools-extended is-below-middle">
<span class="share-tools__tool share-tools__tool--share">
<span class="share-tools__tool__text">SHARE</span>
<div class="share-tools-extended__caret"></div>
</span>
<ul class="share-tools-extended__list">
<li class="share-tools-extended__list--item share-tools-extended__list--item--facebook">
<span class="share-tools-extended__tool share-tools-extended__tool--facebook">
<span class="share-tools-extended__tool__text">Facebook</span>
</span>
</li>
<li class="share-tools-extended__list--item share-tools-extended__list--item--twitter">
<span class="share-tools-extended__tool share-tools-extended__tool--twitter">
<span class="share-tools-extended__tool__text">Twitter</span>
</span>
</li>
<li class="share-tools-extended__list--item share-tools-extended__list--item--tumblr">
<span class="share-tools-extended__tool share-tools-extended__tool--tumblr">
<span class="share-tools-extended__tool__text">Tumblr</span>
</span>
</li>
<li class="share-tools-extended__list--item share-tools-extended__list--item--pinterest">
<span class="share-tools-extended__tool share-tools-extended__tool--pinterest">
<span class="share-tools-extended__tool__text">Pinterest</span>
</span>
</li>
<li class="share-tools-extended__list--item share-tools-extended__list--item--google-plus">
<span class="share-tools-extended__tool share-tools-extended__tool--google-plus">
<span class="share-tools-extended__tool__text">Google+</span>
</span>
</li>
<li class="share-tools-extended__list--item share-tools-extended__list--item--email">
<span class="share-tools-extended__tool share-tools-extended__tool--email">
<span class="share-tools-extended__tool__text">Email</span>
</span>
</li>
</ul>
</div>
</li>
<li class="share-tools__item share-tools__item--save the-save-button">
<span class="share-tools__tool share-tools__tool--save ">
<span class="share-tools__tool__text">SAVE</span>
</span>
</li>
</ul>
</div>
我到目前為止編寫的代碼:
<div class="daily-featured__video-social">
<ul class="share-tools__daily-featured share-tools">
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
var memlist = $(".daily-featured__video-social ul");
var members = {
share: "SHARE",
save: "SAVE"
};
var share_tools = $(".share-tools-extended__list");
var socials = {
facebook: "Facebook",
twitter: "Twitter",
tumblr: "Tumblr",
pinterest: "Pinterest",
'google-plus': "Google+",
email: "Email"
};
$.each(members, function(index, value) {
if (index == "share") {
memlist.append($('<li class="share-tools__item share-tools__item--extended">' +
'<div class="share-tools-extended is-below-middle">' +
'<span class="share-tools__tool share-tools__tool--share">' +
'<span class="share-tools__tool__text">' + value +
'</span>' +
'<div class="share-tools-extended__caret"></div>' +
'</span>' +
'<ul class="share-tools-extended__list">'+
'</ul>' +
'</div>' +
'</li>'));
}
if (index == "save") {
memlist.append($('<li class="share-tools__item share-tools__item--save the-save-button">' +
'<span class="share-tools__tool share-tools__tool--' + index + '">' +
'<span class="share-tools__tool__text">' + value +
'</span>' +
'</span>' +
"</li>"));
}
});
});
</script>
並生成以下輸出:
<div class="daily-featured__video-social">
<ul class="share-tools__daily-featured share-tools">
<li class="share-tools__item share-tools__item--extended">
<div class="share-tools-extended is-below-middle">
<span class="share-tools__tool share-tools__tool--share">
<span class="share-tools__tool__text">SHARE</span>
<div class="share-tools-extended__caret"></div>
</span>
<ul class="share-tools-extended__list"></ul>
</div>
</li>
<li class="share-tools__item share-tools__item--save the-save-button">
<span class="share-tools__tool share-tools__tool--save">
<span class="share-tools__tool__text">SAVE</span>
</span>
</li>
</ul>
</div>
請注意,我需要在<ul class="share-tools-extended__list"></ul>
內使用第二個循環,為此我准備了一個數組,例如:
var socials = {
facebook: "Facebook",
twitter: "Twitter",
tumblr: "Tumblr",
pinterest: "Pinterest",
'google-plus': "Google+",
email: "Email"
};
我不太熟悉javascript和jquery。 任何指導都會有所幫助。
您可以使用jQuery選擇share-tools-extended__list
類並追加到那里。
例如:
if (index == "share") {
memlist.append($('<li class="share-tools__item share-tools__item--extended">' +
'<div class="share-tools-extended is-below-middle">' +
'<span class="share-tools__tool share-tools__tool--share">' +
'<span class="share-tools__tool__text">' + value +
'</span>' +
'<div class="share-tools-extended__caret"></div>' +
'</span>' +
'<ul class="share-tools-extended__list">'+
'</ul>' +
'</div>' +
'</li>'));
var innerList = $('ul.share-tools-extended__list');
$.each(socials, function(index, value) {
// fill in this part with the exact markup you need
innerList.append($('<li>STUFF</li>'));
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.