Jquery - 动态生成左右两列表结构div例子

// 动态生成左右两列表结构div例子
var result = resultData.result;
var jsonData = {};
var jsonDataSize = 0;

result.name = "劲量";
result.en_name = "abc";
result.gender = "男";
result.description = "abc1234567890qwertyuiopasdfghjklzxcvbnm";

// 基本信息
$("#main_history").append("<div style=\"font-size:34px; text-align:left; font-weight:bold;\">" + result.name + "</div>");
$("#main_history").append("<div class=\"break-footer\" style=\"min-height:30px;\"></div>");
$("#main_history").append("<div style=\"font-size:14px; text-align:left; line-height:24px; \">" + result.description + "</div>");
$("#main_history").append("<div class=\"break-footer\" style=\"min-height:30px;\"></div>");

if (result.name != null) 	{jsonData["中文名"] = result.name; jsonDataSize++;};
if (result.en_name != null) 	{jsonData["外文名"] = result.en_name; jsonDataSize++;};
if (result.gender != null) 	{jsonData["性别"] = result.gender; jsonDataSize++;};

var rowSize = Math.ceil(jsonDataSize / 2);
var jsonData_i = 0;
var div_i = 0;
$.each(jsonData, function(key, value){
if (jsonData_i == 0 || jsonData_i == rowSize) {
div_i++;
// 生成左右两个div
var table = "<div id=\"div_" + div_i + "\">";
$("#main_history").append(table);
}
// 生成行div
$("#main_history #div_" + div_i).append("<div class=\"biItem\" style=\"float:left; width:395px; line-height:26px;\">");
// 生成内容div
$("#main_history #div_" + div_i + " div:last").append("<span style=\"text-align:left; float:left; color:#999; width:78px; border-bottom:1px dashed #BBB; font-weight:bold;\">" + key + "</span>");
$("#main_history #div_" + div_i + " div:last").append("<span style=\"text-align:left; float:left; color:#333; width:300px; border-bottom:1px dashed #BBB;\">" + value + "</span>");

jsonData_i++;
});

// 动态生成属性
result.imageUrl = "http://...";
$("#main_history").after("<div id=\"side\" style=\"display:inline; float:right;\">");
$("#side").append("<img src=\"\" alt=\"\">");
$("#side img").attr("src",result.imageUrl);
$("#side img").attr("alt",result.name);