我有一个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>
作为字符串返回。
答案 0 :(得分:0)
您在寻找字符串连接吗?
<强> 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));
答案 1 :(得分:0)
解决方案:解析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模板库会更强大。)