js解析json，并动态创建dom元素，放到指定元素下，求高手指点！

zygis666 2012-07-27 08:53:02
求高手急救！！！！
json数据如下：
var chat=[
{
'aa': '110000000',
'chatLog': [
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'},
{'name1': 'efg','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'},
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'}
]
},
{
'aa': '11',
'chatLog': [
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'},
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'}
]
}
]

js部分为：
<script type="text/javascript">
$().ready(function() {
for(var i=0;i<chat.length;i++)
{
var div= document.createElement('div');
div.innerHTML='<span class="chat_time">'+chat[i].aa+'</span><hr/><dl></dl>'
div.className='chat_win';
$(".panal").append(div);
for(var j=0;j<chat[i].chatLog.length;j++)
{
var dt=document.createElement('dt');
$(".panal dl").append(dt);
}没有达到我要的效果？？？求修改！

}
});
</script>
<body>
<div class="panal"></div>
</body>



想实现成以下效果：
<div class="panal">
<div class="chat_win">
<span class="chat_time">110000000</span>
<hr/>
<dl>
<dt class="chat_A"><span>abc</span><span>1111111111</span></dt>
<dd>你好！</dd>
<dt class="chat_B"><span>efg</span><span>2222222222</span></dt>
<dd>不好！</dd>
<dt class="chat_B"><span>efg</span><span>1111111111</span></dt>
<dd>你好！</dd>
<dt class="chat_B"><span>efg</span><span>2222222222</span></dt>
<dd>不好！</dd>
<dt class="chat_A"><span>abc</span><span>1111111111</span></dt>
<dd>你好！</dd>
<dt class="chat_B"><span>efg</span><span>2222222222</span></dt>
<dd>不好！</dd>

</dl>
</div>
<div class="chat_win">
<span class="chat_time">11</span>
<hr/>
<dl>
<dt class="chat_A"><span>abc</span><span>1111111111</span></dt>
<dd>你好！</dd>
<dt class="chat_B"><span>efg</span><span>2222222222</span></dt>
<dd>不好！</dd>
<dt class="chat_A"><span>abc</span><span>1111111111</span></dt>
<dd>你好！</dd>
<dt class="chat_B"><span>efg</span><span>2222222222</span></dt>
<dd>不好！</dd>

</dl>
</div>
</div>
...全文
651 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2012-07-27
  • 打赏
  • 举报
 回复
$(".panal dl").append(dt);你这个选择器有问题啊，会将所有的dt给dl重新加一次。

其他代码你应该都清楚，就接卸关键的
        dl = $(div).find('dl');//这里获取刚添加到dom的dl对象，以后使用此对象操作，而不是$(".panal dl")，这样会操作所有已经添加到dom的dl对象

        clsKV = {};//重置样式键值对象

        chr = 65;//A字符对应的数字编码

        for (var j = 0; j < chat[i].chatLog.length; j++) {//////////////

            if (!clsKV[chat[i].chatLog[j].name1]) {//样式控制，判断是否存在对应名字的kv对了，没有则添加

                clsKV[chat[i].chatLog[j].name1] = String.fromCharCode(chr);//从数字生成字符

                chr++;//换到下一个字符，变换样式

            }

////////////往前面获取到的dl增加内容

            dl.append('<dt class="chat_' + clsKV[chat[i].chatLog[j].name1] + '"><span>' + chat[i].chatLog[j].name1 + '</span><span>' + chat[i].chatLog[j].hour + '</span></dt><dd>' + chat[i].chatLog[j].content + '</dd>');

        }
zygis666 2012-07-27
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]

搞错，多了个new，代码出处了
JScript code
$().ready(function () {
var div, dl, clsKV, chr = 65;
for (var i = 0; i < chat.length; i++) {
div = document.createElement('div');
div.innerHTML……
[/Quote]

哈哈，确实是我要的效果，可以解释下吗？你写的部分我不大懂，当然了，越详细越好，拜托啦
hch126163 2012-07-27
  • 打赏
  • 举报
 回复
dt=document.createElement('dt');
dt.innerHTML="<span>"+chat[i].chatLog[j].name1+"</span><span>"+chat[i].chatLog[j].hour+"</span>"
$(".panal dl").append(dt);
Go 旅城通票 2012-07-27
  • 打赏
  • 举报
 回复
搞错，多了个new，代码出处了
$().ready(function () {

    var div, dl, clsKV, chr = 65;

    for (var i = 0; i < chat.length; i++) {

        div = document.createElement('div');

        div.innerHTML = '<span class="chat_time">' + chat[i].aa + '</span><hr/><dl></dl>'

        div.className = 'chat_win';

        $(".panal").append(div);

        dl = $(div).find('dl');

        clsKV = {};

        chr = 65;

        for (var j = 0; j < chat[i].chatLog.length; j++) {//////////////

            if (!clsKV[chat[i].chatLog[j].name1]) {//样式控制

                ///clsKV[chat[i].chatLog[j].name1] = new String.fromCharCode(chr);



                clsKV[chat[i].chatLog[j].name1] = String.fromCharCode(chr);

                chr++;

            }

            dl.append('<dt class="chat_' + clsKV[chat[i].chatLog[j].name1] + '"><span>' + chat[i].chatLog[j].name1 + '</span><span>' + chat[i].chatLog[j].hour + '</span></dt><dd>' + chat[i].chatLog[j].content + '</dd>');

        }



    }

});
zygis666 2012-07-27
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]

JScript code
$().ready(function () {
var div, dl, clsKV, chr = 65;
for (var i = 0; i < chat.length; i++) {
div = document.createElement('div');
div.innerHTML = '<span class="……
[/Quote]
哎，运行无效果、、、
zygis666 2012-07-27
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]
$(document).ready(function() {

for(var i=0;i<chat.length;i++)
{
var div= document.createElement('div');
div.innerHTML='<span class="chat_time">'+chat[i].aa+'</span><hr/><dl></dl>'
div.className……
[/Quote]
这样不行，我之前就是这么做的，但是dt/dd会变多，本来是6条和4条数据，会变成10条和4条数据。你再帮忙看看。。。
Go 旅城通票 2012-07-27
  • 打赏
  • 举报
 回复 
$().ready(function () {

    var div, dl, clsKV, chr = 65;

    for (var i = 0; i < chat.length; i++) {

        div = document.createElement('div');

        div.innerHTML = '<span class="chat_time">' + chat[i].aa + '</span><hr/><dl></dl>'

        div.className = 'chat_win';

        $(".panal").append(div);

        dl = $(div).find('dl');

        clsKV = {};

        chr = 65;

        for (var j = 0; j < chat[i].chatLog.length; j++) {//////////////

            if (!clsKV[chat[i].chatLog[j].name1]) {//样式控制

                clsKV[chat[i].chatLog[j].name1] = new String.fromCharCode(chr);

                chr++;

            }

            dl.append('<dt class="chat_' + clsKV[chat[i].chatLog[j].name1] + '"><span>' + chat[i].chatLog[j].name1 + '</span><span>' + chat[i].chatLog[j].hour + '</span></dt><dd>' + chat[i].chatLog[j].content + '</dd>');

        }



    }

});
孟子E章 2012-07-27
  • 打赏
  • 举报
 回复

$(document).ready(function() {

for(var i=0;i<chat.length;i++)
{
var div= document.createElement('div');
div.innerHTML='<span class="chat_time">'+chat[i].aa+'</span><hr/><dl></dl>'
div.className='chat_win';
$(".panal").append(div);
for(var j=0;j<chat[i].chatLog.length;j++)
{
var dt=document.createElement('dt');
dt.innerHTML=chat[i].chatLog[j].content
$(".panal dl").append(dt);
dt=document.createElement('dt');
dt.innerHTML="<span>"+chat[i].chatLog[j].name1+"</span><span>"+chat[i].chatLog[j].hour+"</span>"
$(".panal dl").append(dt);
}

}
});
android 数据解析 JSON 开发详解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。学习 android 数据交换格式 JSON 介绍，JSON 的解析和生成；
ajax与json实战
目录：（Ctrl+F进行检索）1.javascript中底层的ajax异步请求后台操作的方法与实例。2.jquery对ajax的各种操作方法3.ajax详解4....8.ajax异步获取到后台的json并进行处理。---------------------------------------...
JS 万字总结 重量级干货！！！2.6万字JS干货分享，带你领略前端魅力！
建议：适合有js基础的小伙伴观看，篇幅较长，建议先收藏再慢慢浏览 整整花了一周时间总结了一些比较重点也有些比较偏的知识，希望各位小伙伴慢慢品尝，如果有不对的地方或者是需要优化的地方望请告知，尽量给大家...
JS基础2.0
js 组成部分 ECMAScript + BOM(browser object model) + DOM(document object model) js 历史 为了解决表单验证问题 js 前端页面效果 + 后端进行交互！！！！！ 2+2+2 js创建 内部js <script> // ...
javascript笔记
js执行机制 1.先执行执行栈中的同步任务 2.异步任务（回调函数）放入任务队列中 3一旦执行栈中的所有同步任务执行完毕，系统聚会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，...
JavaScript

87,923

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章