首先在html页面中找到相应的ul标签对。
如下图:
<ul id="ulPlayPist">
<li class="li_style">
<div id="divItem1" class="div_item_v_style">
<img id="img_item_1" src="../img/Icon_Movie.png" class="img_v_style"/>
<input id="listItem_1" type="button" value="暂无" class="btn_list_item_v_style" onclick="Item_Click(1);"/>
</div>
</li>
</ul>
上面是一个html文件内ul标签的一个范例,并且li标签内含有div 等子标签。这个就不多说了,如果不懂建议先学习一下html基础。
二、需要在js函数内找到ul标签控件。
要获取ul对象可以通过id来进行查找。不过jQuery提供了一些简单的方法。
如下图:
//通过id=lPlayPist查找ul标签控件
$('#ulPlayPist').append("");
上面代码已经包含查找一阶添加。
三、动态添加。
组织需要添加标签String。如下
var li_str = '<li class="li_style">';
li_str += '<div id="divItem'+(i+1).toString()+'" class="div_item_v_style">';
li_str += '<img id="img_item_' + (i + 1).toString() + '" src="../img/Icon_Movie.png" class="img_v_style"/>';
li_str += '<input id="listItem_' + (i + 1).toString() + '" type="button" value="' + dict_data["List"][i] + '" class="btn_list_item_v_style" οnclick="Item_Click(' + (i + 1).toString() + ');"/>';
li_str += '</div></li>';
然后通过append这个语句,添加进去。
//添加数据到UL
function AddListToUl(dict_data) {
var list_count = parseInt(dict_data["Count"]);
$("#ulPlayPist").find("li").remove();
for (var i = 0; i < list_count; i++) {
var li_str = '<li class="li_style">';
li_str += '<div id="divItem'+(i+1).toString()+'" class="div_item_v_style">';
li_str += '<img id="img_item_' + (i + 1).toString() + '" src="../img/Icon_Movie.png" class="img_v_style"/>';
li_str += '<input id="listItem_' + (i + 1).toString() + '" type="button" value="' + dict_data["List"][i] + '" class="btn_list_item_v_style" οnclick="Item_Click(' + (i + 1).toString() + ');"/>';
li_str += '</div></li>';
$('#ulPlayPist').append(li_str);
}
}
以上就是基本代码。
出来的效果就这样(从浏览器调试看到的)
添加前:
动态添加后:
由于使用ajax减少界面刷新,实现动态实时加载数据。最后希望对大家有帮助。