如何使用jQuery DOM操作动态构建/添加列表元素(ul,ol,li)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (111)

我正在编写一个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');

实际上你可以在没有vars 的单个语句中完成整个事情,但在我看来,这将变得太难看了。

扫码关注云+社区

领取腾讯云代金券