![](/img/trans.png)
[英]How to dynamically build/add list elements (ul, ol, li) using jQuery DOM manipulations?
[英]dynamically add list item to ul using jquery
我有以下html結構:
<div id="gw-sidebar" class="gw-sidebar">
<div class="nano-content">
<ul class="gw-nav gw-nav-list">
<li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> </li>
//===>Need to add the new list using Jquery here
</ul>
</div>
</div>
我想使用jquery向上面顯示的類'init-un-active'添加如下所示的列表:
<li class="init-arrow-down"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenario-1</span> <b class="gw-arrow"></b> </a>
<ul class="gw-submenu">
<li> <a href="javascript:void(0)">Scenario</a> </li>
<li> <a href="javascript:void(0)">Resolutions</a> </li>
<li> <a href="javascript:void(0)">Triggers</a> </li>
</ul>
</li>
如何使用jquery將代碼動態添加到上述類中?
我嘗試了以下方法,但無法正常工作:
<script type="text/javascript">
function loadScenarioForm () {
SideMenu.createBaseEntry();
// ScenarioForm.create();
}
var SideMenu = {
container : null,
scenarioCount : 0,
scenarioTxt : "Scenario",
ResolutionsTxt : "Resolutions",
TriggersTxt : "Triggers",
menuLink : "javascript:void(0)",
subMenuLink1 : "javascript:void(0)",
subMenuLink2 : "javascript:void(0)",
subMenuLink3 :"javascript:void(0)",
createBaseEntry : function createDefault () {
this.container = $(document.createElement('div'));
this.container.addClass('gw-sidebar');
var html = "";
html += '<div id="gw-sidebar" class="gw-sidebar">';
html += '<div class="nano-content">';
html += '<ul class="gw-nav gw-nav-list">';
html += '<li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> </li>';
html += '</ul></div></div></div>';
this.container.append(html);
$('body').append(this.container);
this.scenarioCount++;
this.container.append(this.createEntry(scenarioCount));
},
createEntry : function createDefault (index) {
var list = $('ul.mylist');
var li = $('<li/>')
.addClass('ui-menu-item')
.attr('role', 'menuitem')
.appendTo(list);
return list;
},
</script>
請指教,
謝謝!
您可以將<li>
用作模板,並使用jquery將其附加到<ul>
。 您可以嘗試像這樣的小提琴 :
$(document).ready(function(){
$('a').click(function() {
var template = $('#hidden-template').html();
$('.gw-nav').append(template);
});
});
if ($(".init-un-active").length == 0) {
$.ajax({
url: 'URL From where you want to load ...',
type: 'POST',
data: { id: ID}, // pass your data here if any .. else keep empty
success: function (data) {
$(".init-un-active").css({ "display": "block", "z-index": "999999999999" });
$(".init-un-active").html(data);
},
error: function () {
alert('Unable to load menu...');
}
});
}
else {
if ($(".init-un-active ul").length > 0) {
$(".init-un-active ul").css("display", "none");
$(".init-un-active").css("display", "block");
}
}
說明:
if ($(".init-un-active").length == 0)
此條件用於檢查是否已在li中加載項目。如果是,則無需調用ajax ..只需隱藏show that menu。
$(".init-un-active").css({ "display": "block", "z-index": "999999999999" });
此css用於顯示菜單的前面並隱藏此菜單旁邊的所有內容。
this.container.append(html);
$('body').append(this.container);
而不是嘗試這個
$(".init-un-active").html(html);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.