undefined

for循环遍历二维数组、嵌套元素

发表于 | 分类于 ，
字数统计: 820 | 阅读时长 ≈ 4

二维数组

即数组里面的数组，例如常见的好友列表就是这种结构。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    var arr = [
        [1, 2, 3, 4, '4+'],
        [4, 5, 6],
        [7, 8, 9]
    ];

    // arr[1][2]

    for (var i = 0; i < arr.length; i++) {
        // arr[i][0]
        // arr[i][1]
        // arr[i][2]
        for (var j = 0; j < arr[i].length; j++) {
            // alert( arr[i][j] );
        }
    }

    // for( var i=0; ){}
    // for( var i=0; ){}

    window.onload = function() {
        var oUl = document.getElementById('list');
        var aUl = oUl.getElementsByTagName('ul');
        var len = aUl.length;
        var aLi = null; // 空

        for (var i = 0; i < len; i++) {
            aLi = aUl[i].getElementsByTagName('li');

            for (var j = 0; j < aLi.length; j++) {
                aLi[j].style.border = '1px solid red';
            }
        }
    };
    </script>
</head>

<body>
    <ul id="list">
        <li>
            <h2>我的好友</h2>
            <ul>
                <li>莫涛</li>
                <li>张森</li>
                <li>杜鹏</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>no</li>
                <li>no</li>
                <li>no</li>
            </ol>
        </li>
        <li>
            <h2>我的白名单</h2>
            <ul>
                <li>莫小涛</li>
                <li>张小森</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>no</li>
                <li>no</li>
                <li>no</li>
            </ol>
        </li>
        <li>
            <h2>我的黑名单</h2>
            <ul>
                <li>莫张</li>
            </ul>
        </li>
    </ul>
</body>

</html>

cssText

在下例中，cssText只是针对div的行间样式做修改，并没有动style里面的样式。后面的cssText会替换掉前面的cssText。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
    }
    </style>
</head>

<body>
    <div id="div1">123</div>
    <input id="btn1" type="button" value="按钮" />
    <script>
    var oDiv = document.getElementById('div1');
    var oBtn = document.getElementById('btn1');

    oDiv.onclick = function() {
        // oDiv.style.width = '200px';
        oDiv.style.cssText = ' width:200px;height:200px;';
    
    };
    oBtn.onclick = function() {
        // oDiv.style.width = '100px';
        oDiv.style.cssText = '';  //这里的cssText会替换掉上面的cssText，类似于innerHTML
    };
    </script>
</body>

</html>

例子：自动上生成一组新闻

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var oBtn = document.getElementById('btn1');
        var oUl = document.getElementById('list');
        var arr = [
            '山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
            '甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
            '多地制定雾霾预案限行限排被批治标不治本',
            '韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
            '伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
        ];
   
        var onOff = true;

        oBtn.onclick = function() {

            // oBtn.disabled = true;
            // oBtn.style.display = 'none';  //思路1、按钮找麻烦

            // oUl.innerHTML = '';      //思路2、先清空，再生成，不过影响性能

            // onOff = false;				no!!!!

            if (onOff) {                 //思路3、另设一个变量，做判断

                // onOff = false;				ok

                for (var i = 0; i < arr.length; i++) {
                    oUl.innerHTML += '<li>' + arr[i] + '</li>';
                }
                // onOff = false;				ok
            }
            onOff = false;
        };
    };
    </script>
</head>

<body>
    <input id="btn1" type="button" value="自动生成5条新闻" />
    <ul id="list" style="border:1px solid red;"></ul>
    <script>
    alert(document.getElementById('list').style.border);
    </script>
</body>

</html>

觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多