首页 > 代码库 > 【实用代码片段】将json数据绑定到html元素 (转)
【实用代码片段】将json数据绑定到html元素 (转)
jQuery扩展
jQuery.fn.extend({ ‘jsonBind‘:function(json){ var dom=this; dom.find(‘[json-bind]‘).each(function(){ var val=$.trim(json[$(this).attr(‘json-bind‘)]); if(val!=‘‘) $(this).html(val); }); dom.find(‘[json-bind-attr]‘).each(function(){ var s=$(this).attr(‘json-bind-attr‘).split(‘|‘); if($(this).attr(s[0]).indexOf(‘{%s}‘)>-1){ $(this).attr(s[0],$(this).attr(s[0]).replace(‘{%s}‘,json[s[1]])); }else{ $(this).attr(s[0],json[s[1]]); } }); } });
使用方法
<ul> <li json-bind="name"></li> <li json-bind="year"></li> <li json-bind="birth"></li> <li json-bind="work"></li> <li><a href=http://www.mamicode.com/"#" json-bind-attr="href|website" json-bind="website"></a></li> <li><a href=http://www.mamicode.com/"http://zcc.ren/article/{%s}" json-bind-attr="href|article">来源</a></li> </ul>
$(‘ul‘).jsonBind({‘name‘:‘canson‘,‘year‘:100,‘birth‘:‘1970-01-01‘,‘work‘:‘webfront‘,‘website‘:‘http://zcc.ren/‘,‘article‘:140});
【实用代码片段】将json数据绑定到html元素 (转)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。