js中怎么解析list集合，需要利用使用集合中的数据

JavaScript017

js中怎么解析list集合，需要利用使用集合中的数据,第1张

var arr = [

    {content: "页面设计", id:1, num:105,parentid:1},

    {content: "网站使用的便捷度", id:2, num:105,parentid:1},

    {content: "信息公开力度", id:3, num:105,parentid:1},

    {content: "网上互动服务", id:4, num:105,parentid:1}

]

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

    var obj = arr[i]

    for(var key in obj){

        console.log(key + ": " + obj[key])

    }

}

很简单的一个使用：点击菜单，能够显示下面的或者不显示

1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该node.style.overflow="visible"当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽。

2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

具体代码如下。

<!DOCTYPE html>

<html>

<head>

<!-- 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该

node.style.overflow="visible"

2，采用同样的技术，多加几个，但是就是传参数比较麻烦

-->

<title>list.html</title>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

dl{

height:18px/*优先级问题，必须要写*/

overflow:hidden

}

dd{

margin:0px

padding:0px

}

.close{

height:18px/*优先级问题，必须要写*/

overflow:hidden

}

.open{

height:80px

overflow:visible

background-color:#ff8000

}

</style>

<script type="text/javascript">

function click2(node1){

//                      alert("aa"+node.nodeName)// td

var nodes=node1.parentNode

//                      alert(nodes.nodeName)

//  alert("aa"+nodes.className)

//※※通过传进的对象 判断采用哪种css模式

if(nodes.className=="open"){

nodes.className="close"

}else{

nodes.className="open"

}

}

</script>

</head>

<body>

<!--层次列表-->

<!--当很多时候采用传参就很麻烦,每个都需要去传参

<dl>

<dt onclick="click1(0)">菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click1(1)">菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click1(2)">菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

-->

<br/>

<br/>

<hr/>

<!--<dl class="close">先手动采用css测试，可以然后采用编程使用-->

<dl>

<dt onclick="click2(this)">1菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click2(this)">2菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click2(this)">3菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

</body>

</html>

list集合中如果封装的是如字符串或者基本数据类型的数据，则可以通过list.toArray()转换成数组传到JS中读取，如果list集合中保存的是对象，则将对象转换成JSON类型的字符串保存在list集合中，在JS中读取时，先读取到字符串，再将字符串转换为JSON对象处理就行了。