javascript - jQuery怎么动态生成列表
PHP中文网
PHP中文网 2017-04-11 11:09:05
0
3
387

这样的列表,怎么动态生成?
我想通过造假数据生成,下面的是我的假数据,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":"上海中山医院"
      }]
    }

其中每个列表的样式为:

<!--医生列表-->
                            <p class="weui-jiaj-panel">
                                <a href="department/change_doctor_info.html" class="weui-jiaj-a-color" data-id="doctorInfo">
                                    <p class="weui-media-box weui-media-box_appmsg">
                                        <p class="weui-media-box__hd">
                                            <img class="weui-media-box__thumb" src="../img/doctor/55.jpg" alt="">
                                        </p>
                                        <p 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>
                                        </p>
                                        <p class="weui_jia_cell_ft"></p>
                                    </p>
                                </a>
                            </p>
                            

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

$(function () {
    //创建最外层p
    var $main = $('<p></p>');
    $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 = $('<p class="weui-media-box weui-media-box_appmsg"></p>');
    var $doctorImgBox = $('<p class="weui-media-box__hd"></p>');
    var $doctorImg = $('<img />').attr('src','url'); 
    $doctorImg.addClass('weui-media-box__thumb');
    
    //创建医生信息p
    var $doctorBox = $('<p class="weui-media-box__bd"></p>');
    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 = $('<p class="weui_jia_cell_ft"></p>');
    
    //医生信息添加到医生信息p中
    $doctorBox.append($doctorName);
    $doctorBox.append($doctorDevelment);
    $doctorBox.append($doctorHospital);
    
    
    $doctorImgBox.append($doctorImg);
    //最外层p
    $mediaBox.append($doctorImgBox);
    $mediaBox.append($doctorBox);
    $mediaBox.append($jiantou);
    $str.append($mediaBox);
    //将a标签添加到p
    $main.append($str);
    //将p添加到#tab1
    $('#tab1').append($main);
    
});
PHP中文网
PHP中文网

认证0级讲师

全部回覆(3)
刘奇

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

伊谢尔伦

实现上你的代码已经把创建和加入 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));
Peter_Zhu

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板