这样的列表,怎么动态生成?
我想通过造假数据生成,下面的是我的假数据,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);
});
你这样写DOM操作太多了,性能很差的~
我写个demo给你参考一下:
https://jsfiddle.net/uyLebod2/
实现上你的代码已经把创建和加入 tab1 的逻辑写完了,只需要把
$('#tab1').append($main)
之前的代码按数据项重复,并在生成 $xxxxx 的时候适当的插入数据值(可以用$xxxx.text(docutor.docutorName)
这样)。把你写的这段代码写成一个函数,比如
createJiajPanel(dockerData)
,返回得到的$main
。对于数据,
dockerList
是个列表,可以这样楼主主要问的是“把假数据拼成3个列表” 先抛开操作dom的性能问题不说 你已经把创建跟插入做粗来了 就剩下获取假数据了 你在js文件中直接循环data获取值 然后在插入每个p的时候拼接上去就可以了