jQuery怎么动态生成列表

Question

这样的列表，怎么动态生成？
我想通过造假数据生成，下面的是我的假数据，3个列表：

var data = {
      "doctorList":[{
        "doctorId":"d001",
        "doctorImg":"http://img.dongqiudi.com/uploads/avatar/2014/10/20/8MCTb0WBFG_thumb_1413805282863.jpg",
        "doctorName":"潘仁和",
        "doctorDevlement":"骨科",
        "hospitalName":"上海华山医院"
      },{
        "doctorId":"d002",
        "doctorImg":"http://cdn.duitang.com/uploads/item/201410/05/20141005160337_RZX8W.thumb.224_0.jpeg",
        "doctorName":"李丽",
        "doctorDevlement":"儿科",
        "hospitalName":"上海中山医院"
      },{
        "doctorId":"d003",
        "doctorImg":"http://diy.qqjay.com/u2/2012/0924/7032b10ffcdfc9b096ac46bde0d2925b.jpg",
        "doctorName":"陆子林",
        "doctorDevlement":"儿科",
        "hospitalName":"上海中山医院"
      }]
    }

其中每个列表的样式为：

<!--医生列表-->
                            <div class="weui-jiaj-panel">
                                <a href="department/change_doctor_info.html" class="weui-jiaj-a-color" data-id="doctorInfo">
                                    <div class="weui-media-box weui-media-box_appmsg">
                                        <div class="weui-media-box__hd">
                                            <img class="weui-media-box__thumb" src="../img/doctor/55.jpg" alt="">
                                        </div>
                                        <div class="weui-media-box__bd">
                                            <h4 class="weui-media-box__title">潘仁和</h4>
                                            <p class="weui-media-box__desc">骨科</p>
                                            <p class="weui-media-box__desc">上海交通大学医学院附属瑞金医院</p>
                                        </div>
                                        <div class="weui_jia_cell_ft"></div>
                                    </div>
                                </a>
                            </div>
                            

每个weui-jiaj-panel都要放在id="tab1"中，我通过下面的方法，把一个列表拼出来了，但是要把假数据拼成3个列表，就不会了，请问该怎么操作？下面是我的：

$(function () {
    //创建最外层div
    var $main = $('<div></div>');
    $main.addClass('weui-jiaj-panel');
    
    var $str = $('<a></a>');
    $str.attr('href','department/change_doctor_info.html');
    $str.attr('target','_blank');
    $str.addClass('weui-jiaj-a-color');
    
    
    //创建列表
    var $mediaBox = $('<div class="weui-media-box weui-media-box_appmsg"></div>');
    var $doctorImgBox = $('<div class="weui-media-box__hd"></div>');
    var $doctorImg = $('<img />').attr('src','url'); 
    $doctorImg.addClass('weui-media-box__thumb');
    
    //创建医生信息div
    var $doctorBox = $('<div class="weui-media-box__bd"></div>');
    var $doctorName = $('<h4 class="weui-media-box__title"></h4>');
    var $doctorDevelment = $('<p class="weui-media-box__desc department"></p>');
    var $doctorHospital = $('<p class="weui-media-box__desc hospital"></p>');
    
    //创建右箭头
    var $jiantou = $('<div class="weui_jia_cell_ft"></div>');
    
    //医生信息添加到医生信息div中
    $doctorBox.append($doctorName);
    $doctorBox.append($doctorDevelment);
    $doctorBox.append($doctorHospital);
    
    
    $doctorImgBox.append($doctorImg);
    //最外层div
    $mediaBox.append($doctorImgBox);
    $mediaBox.append($doctorBox);
    $mediaBox.append($jiantou);
    $str.append($mediaBox);
    //将a标签添加到div
    $main.append($str);
    //将div添加到#tab1
    $('#tab1').append($main);
    
});

Answer 1

你这样写DOM操作太多了，性能很差的~
我写个demo给你参考一下：
https://jsfiddle.net/uyLebod2/

Answer 2

实现上你的代码已经把创建和加入 tab1 的逻辑写完了，只需要把 $('#tab1').append($main) 之前的代码按数据项重复，并在生成 $xxxxx 的时候适当的插入数据值(可以用 $xxxx.text(docutor.docutorName) 这样)。

把你写的这段代码写成一个函数，比如 createJiajPanel(dockerData)，返回得到的 $main。

function createJiajPanel(doctor) {
    $main = ......;
    
    // 比如 <h4 class="weui-media-box__title">潘仁和</h4>
    $doctorName = $("<h4>")
        .addClass("weui-media-box__title")
        .text(doctor.doctorName || "");
        
    // ......
    return $main;
}

对于数据，dockerList 是个列表，可以这样

// 下面的代码可以用循环代替
data.dockerList
    // map 会根据后面的箭头函数从原数据列表生成一个新数据列表(就是返回的每个 $main 组成的列表)
    .map(docker => createJiajPanel(docker))
    // 对这个由每个 $main 组成的列表进行遍历，加在 $("#tab1") 中去
    .forEach(panel => $('#tab1').append(panel));

Answer 3

楼主主要问的是“把假数据拼成3个列表” 先抛开操作dom的性能问题不说 你已经把创建跟插入做粗来了 就剩下获取假数据了 你在js文件中直接循环data获取值 然后在插入每个div的时候拼接上去就可以了