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

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

其中每个列表的样式为:

 

潘仁和

骨科

上海交通大学医学院附属瑞金医院

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

$(function () { //创建最外层p var $main = $('

'); $main.addClass('weui-jiaj-panel'); var $str = $(''); $str.attr('href','department/change_doctor_info.html'); $str.attr('target','_blank'); $str.addClass('weui-jiaj-a-color'); //创建列表 var $mediaBox = $('

'); var $doctorImgBox = $('

'); var $doctorImg = $('').attr('src','url'); $doctorImg.addClass('weui-media-box__thumb'); //创建医生信息p var $doctorBox = $('

'); var $doctorName = $('

'); var $doctorDevelment = $('

'); var $doctorHospital = $('

'); //创建右箭头 var $jiantou = $('

'); //医生信息添加到医生信息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/

いいねを押す+0
    伊谢尔伦

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

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

    function createJiajPanel(doctor) { $main = ......; // 比如 

    潘仁和

    $doctorName = $("

    ") .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));
    いいねを押す+0
      Peter_Zhu

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

      いいねを押す+0
        最新のダウンロード
        詳細>
        ウェブエフェクト
        公式サイト
        サイト素材
        フロントエンドテンプレート
        私たちについて 免責事項 Sitemap
        PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!