javascript - jQuery怎么动态生成列表

问题描述

问 题

这样的列表，怎么动态生成？
我想通过造假数据生成，下面的是我的假数据，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);
    
});

解决方案

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

这篇关于javascript - jQuery怎么动态生成列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！