Question

我有一个html结构，

<ul>
    <li>data</li>
    <li><strong>data</strong></li>
    <li><span><a href="data.link">data.name</a></span></li>
</ul>

我想将它处理为javascript对象，如下所示，

[
    {
        'index': 0,
        'render': function (data) {
            return data;
        }
    },
    {
        'index': 1,
        'render': function (data) {
            return '<strong>' + data + '</strong>';
        }
    },
    {
        'index': 2,
        'render': function (data) {
            return '<a href="' + data.link + '">' + data.name + '</a>';
        }
    }
]

我尝试了这段代码，但是在渲染字段内容中没有解析作为json对象的数据参数。

var obj = [];

        $('ul li').each(function(i, content){
            var row = {};
            row.index = i;
            row.render = function(data) {
                return content;
            };

            obj.push(row);
        });

我正在寻找的是这段代码应该可行，

var data = {};
data.name = 'Example';
data.link = 'http://example.com';

console.log(obj[2].render(data));

必须将<a href="http://example.com">Example</a>作为字符串返回。

Answer 1

您在寻找字符串连接吗？

<强> https://jsfiddle.net/oeavo45w/

var obj = [];
$('ul li').each(function (i, content) {
    var row = {};
    row.index = i;
    row.render = function (data) {
        console.log(111, data)
        return '<a href="' + data.link + '">' + data.name + '</a>'
    };
    obj.push(row);
});

var data = {};
data.name = 'Example';
data.link = 'http://example.com';

console.log(obj[2].render(data));

Answer 2

解决方案：解析HTML对象并将文本评估为data变量

抓取content并将其拆分为变量名称data，确保容纳密钥名称。将结果数组提供给render函数，该函数检查键名称并用render参数中提供的数据替换占位符。

var obj = [];

$('ul li').each(function(i, content){
    var content_arr = content.innerHTML.split(/data\.?([^"<]+)?/);
    var row = {};
    row.index = i;
    row.render = function(data) {
        var return_string = '';
        for ( ii in content_arr ) {
            if ( ii % 2 ) {
                if ( content_arr[ii] ) {
                  return_string += data[content_arr[ii]];
                }
                else if ( 'string' === typeof data ) {
                    return_string += data;
                }
            }
            else { return_string += content_arr[ii]; }
        }
        return return_string;
    };
    obj.push(row);
});

// data object
var data = {};
data.name = 'EXAMPLE';
data.link = 'http://example.com';
// <span><a href="http://example.com">EXAMPLE</a></span>

// or data string
data = 'testme';
console.log(obj[1].render(data));
// <strong>testme</strong>

http://jsfiddle.net/heksh7Lr/6/

（Ya，我猜测HTML模板库会更强大。）

从html列表处理javascript对象

2 个答案: