[英]How to recursively add id tag using jQuery to ul & li elements, according to their depth within the list?
[英]How to dynamically build/add list elements (ul, ol, li) using jQuery DOM manipulations?
我正在編寫一個AJAX網頁(使用IE 8),需要根據返回的數據在jQuery中動態構建一個列表。 稍后,我將把列表轉換為jQuery accordian。
我也在嘗試學習使用這些jQuery函數和鏈接的正確方法。 我只是一個jQuery NOOB,但了解JavaScript。 我發現了一篇關於jQuery dom函數的好文章: http : //www.packtpub.com/article/jquery-1.4-dom-insertion-methods
我想盡可能多地使用jQuery dom函數和jQuery鏈接添加,而不是使用文本來使用HTML源代碼。 我想大多使用.wrap()
.appendto()
.attr()
.text()
和.parent()
我不認為“ .attr("class", "CC_CLASS").
是添加類的最佳方法。
鑒於HTML代碼:
<div id="outputdiv"></div>
使用jQuery dom函數將其更改為以下內容:
<div id="outputdiv">
<ul id="JJ_ID">
<li> AAA_text </li>
<li id="BB_ID"> BBB_text </li>
<li class="CC_CLASS"> CCC_text </li>
<li id="DD_ID">DDD_text<br/>
<ol id="EE_ID">
<li> FFF_text </li>
<li id="GG_ID"> GGG_text </li>
<li class="HH_CLASS"> HHH_text </li>
</ol>
</li>
</ul>
</div>
我想出了一些代碼(忽略文本中的空格)。
var aObj = $('<li></li>').text("AAA_text")
var bObj = $('<li></li>').attr("id", "BB_ID").text("BBB_text");
var cObj = $('<li></li>').attr("class", "CC_CLASS").text("CCC_text");
var dObj = $('<li></li>').attr("id", "DD_ID").text("DDD_text");
var fObj = $('<li></li>').text("FFF_text");
var gObj = $('<li></li>').attr("id", "GG_ID").text("GGG_text");
var hObj = $('<li></li>').attr("class", "HH_CLASS").text("HHH_text");
不知何故將(fObj + gObj + hObj)添加到eObj中?
var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);
不知何故將(aObj + bObj + cObj + dObj + eObj)添加到jObj中?
var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);
jObj.appendTo("#xmlOutputId")
.append
方法返回您調用它的相同容器對象 - 利用它來愉快地鏈接方法:
var inner_list = $('<ol/>', {id: "EE_ID" })
.append( $('<li/>', {text: "FFF_text" })
.append( $('<li/>', {id: "GG_ID", text: "GGG_text" })
.append( $('<li/>', {"class": "HH_CLASS", text: "HHH_text" });
var outer_list = $('<ul/>', {id: "JJ_ID" })
.append( $('<li/>', {text: "AAA_text" })
.append( $('<li/>', {id: "BB_ID", text: "BBB_text" })
.append( $('<li/>', {"class": "CC_CLASS", text: "CCC_text" })
.append(
$('<li/>', {id: "DD_ID", text: "DDD_text"})
.append(inner_list)
);
outer_list.appendTo('#xmlOutputId');
你實際上可以在沒有var
的單個語句中完成整個事情,但在我看來會變得太難看了。
您可以使用jQuery模板函數以易於維護的方式執行此操作。 查看此鏈接: http : //api.jquery.com/tmpl/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.