前言

當我們使用ajax載入一個如圖1所示的列表，我相信很多人的ajax中迭代的程式碼是類似這樣的：

for(var i in data.list){
    var head = data.list[i].head,
            name = data.list[i].name,
            height = data.list[i].height,
            weight = data.list[i].weight;

    var html = '<div class="list"><div class="headbox"><img src="' 
 
+
head + '"></div><ul class="info"><li>' +
name + '</li><li>' +
height + '</li><li>' +
weight + '</li></ul></div>';
    $('body').append(html);
}

圖1

思路很簡單，就是把搭建好的html內容字串打斷，在對應的地方加上ajax獲取到的資料，然後append到頁面中。但是這個方法有一個很大的缺陷，比如：程式碼已經寫好，但是突然地，介面需要調整，增加一些新的內容，外觀也調整過了，這時候我們需要重新修改html結構，修改css樣式，將html內容程式碼壓縮成一行，打斷，用“+”連線，加入獲取到的資料。是不是很累？如果修改的不是圖1那樣簡單的例子，而是內容更多，結構更復雜呢？是不是更累？又或者自己發現迭代html內容以及支援一些功能需要在html標籤增加一些屬性，對html結構進行微調（這是在寫html+css程式碼時不容易預測到的），這時候是重複一遍上述的過程還是html改一遍，js再改一遍?總之各種情況導致需要修改程式碼的時候就會造成很大麻煩。

那麼，有沒有一種辦法可以輕鬆地將寫好的html內容轉化成可以動態迭代出來html內容，然後直接append出來就好了？答案是有的！看看下面這幾行程式碼，並對比上文的程式碼：

for(var i in data.list){
    var head = data.list[i].head,
            name = data.list[i].name,
            height = data.list[i].height,
            weight = data.list[i].weight;
    var dataArr = [head,name,height
 
,weight];
    var html = myhtmler.sethtml('htmler1',dataArr);
    $('body').append(html);
}

外掛用法

第一步：

引入jQuery及本外掛

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-htmler-1.0.js"></script>
</head>

第二步：

初始化外掛

var myhtmler = new htmler('.htmler');

第三步：

<style>
    ul{ list-style-type: none; margin:0; padding:0; }
    .htmler { display: inline; }
    .list { width: 200px; border: solid 1px #ddd; padding: 8px; margin-top: 10px; overflow: hidden;}
    .headbox { float:left; width: 100px; height: 100px; }
    .headbox img { display: block; width: 100%; }
    .info { float:left; margin-left:6px; }
</style>

<div class="htmler" id="htmler1">
    <div class="list">
        <div class="headbox"><img src="{images/head1.jpg}"></div>
        <ul class="info">
            <li>{小明}</li>
            <li>{1.75cm}</li>
            <li>{65kg}</li>
        </ul>
    </div>
</div>

第四步：

在js程式碼中使用myhtmler.sethtml()方法：返回加入新資料的html內容。

for(var i in data.list){
    var head = data.list[i].head,
            name = data.list[i].name,
            height = data.list[i].height,
            weight = data.list[i].weight;
    var dataArr = [head,name,height,weight];
    var html = myhtmler.sethtml('htmler1',dataArr);
    $('body').append(html);
}

解釋：myhtmler.sethtml()方法的第1個引數為需要迭代的模板html的外圍div的id名（注意，不需要加“#”號），第2個引數是一個數組，陣列按先後順序加入從ajax獲取到的資料。然後給原來作為模板的html外圍div新增“display:none”的css屬性以隱藏掉即可。如果你覺得頁面中隱藏著模板html內容感覺很不舒服，就在js最後把他remove掉就好啦：$('.htmler').remove()。