jquery 循環數組輸出顯示在html頁面

jquery 沒有雙向數據綁定，但是很多需求確實需要我們從后台接收到數組或者對象循環顯示在前台頁面上，這時我們可以用字符串拼接，元素添加的方法去實現

js部分如下：

$(function(){
            var a=["1aa","2bb","3cc"];
            $("#come").click(function(){
                var  div1='<div class="yk" onclick="cheakitem(this)" style="background: red; margin-top: 5px;">';
                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);
         }

這里對子元素點擊事件傳入的this作出了打印，供新手去學習，靈活使用。以便下一步的業務處理。注意：你們會發現，重復點擊會不斷添加元素，所以需要在循環前添加
$("#shu").empty()；清空父元素

div標簽：

<div id="da" style="width: 300px;height:200px ; background: #CCCCCC; ">
<div id='come' style="height: 20px; background: #e6a475;"> 點擊觸發</div>
<div id="shu">
</div>
</div>

頁面效果如下：

點擊子元素1aa效果如下：

 

 博文出處：http://www.cnblogs.com/mobeisanghai/p/7457807.html，如有轉載請標明文章出處