javascript - jQuery怎么动态生成列表-Questions et réponses sur le réseau chinois PHP

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

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

répondre à tous (3)

刘奇2017-04-11 11:11:05 3 plancher

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

Comme+0

Ajouter une réponse

伊谢尔伦2017-04-11 11:11:05 2 plancher

实现上你的代码已经把创建和加入 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是个列表，可以这样