Jquery，将所有 json 条目更改为折叠状态

Question

我对jquery和javascript作为一个整体还是新手。

我正在尝试在网页加载时折叠此可折叠 json 解析器中的所有条目。

我尝试摆弄第一个函数，但这似乎不起作用。

任何帮助将不胜感激。

这是JS代码：

/**
 * json-view - jQuery collapsible JSON plugin
 * @version v1.0.0
 * @link http://github.com/bazh/jquery.json-view
 * @license MIT
 */
;(function ($) {
    'use strict';
    var collapser = function(collapsed) {
        var item = $('<span />', {
            'class': 'collapser',
            on: {
                click: function() {
                    var $this = $(this);
                    $this.toggleClass('collapsed');
                    var block = $this.parent().children('.block');
                    var ul = block.children('ul');
                    if ($this.hasClass('collapsed')) {
                        ul.hide();
                        block.children('.dots, .comments').show();
                    } else {
                        ul.show();
                        block.children('.dots, .comments').hide();
                    }
                }
            }
        });
        if (collapsed) {
            item.addClass('collapsed');
        }
        return item;
    };
    var formatter = function(json, opts) {
        var options = $.extend({}, {
            nl2br: true
        }, opts);
        var htmlEncode = function(html) {
            if (!html.toString()) {
                return '';
            }
            return html.toString().replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        };
        var span = function(val, cls) {
            return $('<span />', {
                'class': cls,
                html: htmlEncode(val)
            });
        };        
        var genBlock = function(val, level) {
            switch($.type(val)) {
                case 'object':
                    if (!level) {
                        level = 0;
                    }
                    var output = $('<span />', {
                        'class': 'block'
                    });
                    var cnt = Object.keys(val).length;
                    if (!cnt) {
                        return output
                            .append(span('{', 'b'))
                            .append(' ')
                            .append(span('}', 'b'));
                    }
                    output.append(span('{', 'b'));
                    var items = $('<ul />', {
                        'class': 'obj collapsible level' + level
                    });
                    $.each(val, function(key, data) {
                        cnt--;
                        var item = $('<li />')
                            .append(span('"', 'q'))
                            .append(key)
                            .append(span('"', 'q'))
                            .append(': ')
                            .append(genBlock(data, level + 1));
                        if (['object', 'array'].indexOf($.type(data)) !== -1 && !$.isEmptyObject(data)) {
                            item.prepend(collapser());
                        }
                        if (cnt > 0) {
                            item.append(',');
                        }
                        items.append(item);
                    });
                    output.append(items);
                    output.append(span('...', 'dots'));
                    output.append(span('}', 'b'));
                    if (Object.keys(val).length === 1) {
                        output.append(span('// 1 item', 'comments'));
                    } else {
                        output.append(span('// ' + Object.keys(val).length + ' items', 'comments'));
                    }
                    return output;
                case 'array':
                    if (!level) {
                        level = 0;
                    }
                    cnt = val.length;
                    output = $('<span />', {
                        'class': 'block'
                    });
                    if (!cnt) {
                        return output
                            .append(span('[', 'b'))
                            .append(' ')
                            .append(span(']', 'b'));
                    }
                    output.append(span('[', 'b'));
                    items = $('<ul />', {
                        'class': 'obj collapsible level' + level
                    });
                    $.each(val, function(key, data) {
                        cnt--;
                        var item = $('<li />')
                            .append(genBlock(data, level + 1));
                        if (['object', 'array'].indexOf($.type(data)) !== -1 && !$.isEmptyObject(data)) {
                            item.prepend(collapser());
                        }
                        if (cnt > 0) {
                            item.append(',');
                        }
                        items.append(item);
                    });
                    output.append(items);
                    output.append(span('...', 'dots'));
                    output.append(span(']', 'b'));
                    if (val.length === 1) {
                        output.append(span('// 1 item', 'comments'));
                    } else {
                        output.append(span('// ' + val.length + ' items', 'comments'));
                    }
                    return output;
                case 'string':
                    val = htmlEncode(val);
                    if (/^(http|https|file)://[^s]+$/i.test(val)) {
                        return $('<span />')
                            .append(span('"', 'q'))
                            .append($('<a />', {
                                href: val,
                                text: val
                            }))
                            .append(span('"', 'q'));
                    }
                    if (options.nl2br) {
                        var pattern = /n/g;
                        if (pattern.test(val)) {
                            val = (val + '').replace(pattern, '<br />');
                        }
                    }
                    var text = $('<span />', { 'class': 'str' })
                        .html(val);
                    return $('<span />')
                        .append(span('"', 'q'))
                        .append(text)
                        .append(span('"', 'q'));
                case 'number':
                    return span(val.toString(), 'num');
                case 'undefined':
                    return span('undefined', 'undef');
                case 'null':
                    return span('null', 'null');
                case 'boolean':
                    return span(val ? 'true' : 'false', 'bool');
            }
        };
        return genBlock(json);        
    };
    return $.fn.jsonView = function(json, options) {
        var $this = $(this);
        options = $.extend({}, {
            nl2br: true
        }, options);
        if (typeof json === 'string') {
            try {
                json = JSON.parse(json);
            } catch (err) {
            }
        }
        $this.append($('<div />', {
            class: 'json-view'
        }).append(formatter(json, options)));
        return $this;
    };
})(jQuery);

/**
 * json-view - jQuery collapsible JSON plugin
 * @version v1.0.0
 * @link http://github.com/bazh/jquery.json-view
 * @license MIT
 */
.json-view {
    position: relative;
}
.json-view .collapser {
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    left: -1.7em;
    top: -0.2em;
    z-index: 5;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.5;
    cursor: pointer;
}
.json-view .collapsed {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -khtml-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.json-view .bl {
    display: block;
    padding-left: 20px;
    margin-left: -20px;
    position: relative;    
}
.json-view {
    font-family: monospace;
}
.json-view ul {
    list-style-type: none;
    padding-left: 2em;
    border-left: 1px dotted;
    margin: 0.3em;
}
.json-view ul li {
    position: relative;
}
.json-view .dots,
.json-view .comments {
    display: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;     
    user-select: none;
}
.json-view .comments {
    padding-left: 0.8em;
    font-style: italic;
    color: #888;
}
.json-view .null,
.json-view .num,
.json-view .bool,
.json-view .undef {
    font-weight: bold;
    color: #1A01CC;
}
.json-view .str {
    color: #800;
}

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery JSON View demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="../dist/jquery.json-view.js"></script>
        <link href="../dist/jquery.json-view.css" rel="stylesheet">
    </head>
    <body>
        <div id="element"></div>
        <script>
            $(function() {
                $('#element').jsonView(JSON.stringify({
                    demo: 'string',
                    notSet: null,
                    zero: 0,
                    'true': true,
                    'false': false,
                    undef: undefined,
                    number: 5,
                    arr: [1, 2, 3, 'string', null, { a: 1 }, [2, 3, 4]],
                    obj: {
                        string: 'test string',
                        arr: [1, 2, 3, 4, 'myString', ['wow', [9,8,7,6]]],
                        obj1: {
                            hello: 'world',
                            nice: {
                                to: 'meet you',
                                'finally': [1, 2, 3, 4, 5]
                            }
                        }
                    }
                }));
            });
        </script>
    </body>
</html>

请确认所有三个代码文件均在 MIT 下获得许可。

Answer 1

每个<li>都有一个跨度，类 collapser ，使用 inspect 元素，折叠节点时，它会在该元素中添加类collapsed。

所以从技术上讲，你可以尝试使用这个jQuery代码：

$(".collapser").addClass("collapsed"); 

加载 JSON 崩溃程序后。