Question

如何使用jQuery动态创建无序列表？我从XML文件中读取了图像文件路径（href和src）。

 <ul>
       <li><a href="images/test1.png"><img id="imageSlide" src="images/test1.png" alt="" /></a></li>
       <li><a href="images/test2.png"><img id="imageSlide" src="images/test2.png" alt="" /></a></li>
 </ul>

它应该创建无序列表基于XML文件中的XML节点数。

Answer 1

好吧，你必须遍历你的XML结构并在其中创建新的LI nodes。

var dummyXML = "<foo><dummy>element</dummy><dummy>element</dummy><dummy>element</dummy></foo>";
var HTMLmarkup = '';

$(dummyXML).find('dummy').each(function(){
   HTMLmarkup += '<li>' + $(this).text() + '</li>';
});

$('ul').append(HTMLmarkup);

当然，这只是一个虚拟的例子。事实上，你应该考虑使用更复杂的XML遍历系统，如 XPath （取决于你的XML文件有多大）。

Answer 2

$('ul li').text(function(index) {
  return '<a href=images/test' +index +'><img id="imageSlide" src="images/test'+index+'.png" alt="" /></a>';
});

使用jQuery动态创建无序列表

2 个答案: