【实用代码片段】将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="#" json-bind-attr="href|website" json-bind="website"></a></li><li><a href="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});

转载于:https://www.cnblogs.com/shy1766IT/p/7306622.html

【实用代码片段】将json数据绑定到html元素（转）相关推荐

golang中出于性能考虑的那些实用代码片段 |字符串篇
出于性能考虑的那些实用代码片段 |字符串篇在我们编程时,总是需要考虑性能方面的问题,这既能降低成本,又能提高用户的体验.好的性能的代码总是有好处的. 字符串字符串替换/修改当我们需要修改或替换某 ...
C#程序员经常用到的10个实用代码片段
转载地址:http://www.codeceo.com/article/10-csharp-code-spinet.html 如果你是一个C#程序员,那么本文介绍的10个C#常用代码片段一定会给你带来 ...
H5Plus实用代码片段
为什么80%的码农都做不了架构师?>>> 应用升级 function upgrade(url) {plus.nativeUI.showWaiting("升级中...& ...
QT 实用代码片段 (持续更新)
由于项目需要开始转型学习C++,GUI使用QT进行开发,开发过程中踩了不少坑,但是也积累了些宝贵经验,在这儿记录一下,希望能帮到需要的朋友. 1.设置无边框对话框 //设置对话框属性 setWindo ...
vscode创建代码片段
文件→首选项→用户代码片段→html.json "vh": { "prefix": "vh", // 触发的关键字输入vh按下tab键 & ...
实用android 代码,Android 实用代码七段（一）
前言这里积累了一些不常见确又很实用的代码,每收集7条更新一次,希望能对大家有用. 声明欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http ...
经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
前端：分享一些实用的JS代码片段
今天给大家分享一些实用的JS代码片段,有需要的朋友欢迎收藏! 1.获取浏览器的版本 function getBrowser() {var UserAgent = navigator.userAgent ...
为开发者准备的9个实用PHP代码片段（转）
[导读] 当你开发网站.app或博客系统时,如果有一些实用的代码片段可以直接使用,就可以节省你大量的时间和精力.这篇文章就为你分享几个实用的PHP代码片段,帮助你的Web开发. 本文由P ...

【实用代码片段】将json数据绑定到html元素（转）

【实用代码片段】将json数据绑定到html元素（转）相关推荐

最新文章

热门文章

【实用代码片段】将json数据绑定到html元素 （转）

【实用代码片段】将json数据绑定到html元素 （转）相关推荐

最新文章

热门文章

【实用代码片段】将json数据绑定到html元素（转）

【实用代码片段】将json数据绑定到html元素（转）相关推荐