你的位置:首页 > 软件开发 > Java > jquery 循环数组输出显示在html页面

jquery 循环数组输出显示在html页面

发布时间:2017-08-31 14:00:13
jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现js部分如下: $(function(){ var a=["1aa","2bb",&qu ...

jquery 循环数组输出显示在html页面

jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现

js部分如下

$(function(){
var a=["1aa","2bb","3cc"];
$("#come").click(function(){
var div1='<div onclick="cheakitem(this)" >';
var div2='</div>';
$.each(a,function(i,t){
$("#shu").append(div1+t+div2);
})
});
})
function cheakitem(e){
var es=$(e)
console.log(es);
var edata=es.html();
$(e).parent('#shu').siblings('#come').html(edata);
}
jquery 循环数组输出显示在html页面

这里对子元素点击事件传入的this作出了打印,供新手去学习,灵活使用。以便下一步的业务处理。注意:你们会发现,重复点击会不断添加元素,所以需要在循环前添加
$("#shu").empty();清空父元素

div标签:

<div id="da" >
<div id='come' > 点击触发</div>
<div id="shu">
</div>
</div>
jquery 循环数组输出显示在html页面

页面效果如下:

jquery 循环数组输出显示在html页面

点击子元素1aa效果如下:

jquery 循环数组输出显示在html页面

 



原标题:jquery 循环数组输出显示在html页面

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。