本文主要是介绍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++;// 生成左右两个divvar 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);这篇关于Jquery - 动态生成左右两列表结构div例子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
