jQuery 遍历json循环输出 书签

<!DOCTYPE html>
<html>
   <head>
   	  <meta charset="utf-8">
      <title>书签</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	
		 <script type="text/javascript"> 
		 $(function(){
		 	var arr =[
						{"text":"条件注释判断浏览器","url":"http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html"},
						{"text":"Bootstrap_带有案例","url":"http://bootstrap.kinghack.com/"},
						{"text":"Bootstrap案例","url":"http://www.thinkphp.cn/topic/9261.html"},
						{"text":"Bootstrap案例","url":"http://www.yixieshi.com/web/11120.html"},
						{"text":"开源资料","url":"https://github.com/viljamis/responsive-nav.js"},
						{"text":"JQ入门 学习网站","url":"http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html"},
						{"text":"W3CSCHOOL菜鸟教程","url":"http://www.w3cschool.cc/"},
						{"text":"图表区选项","url":"http://higrid.net/c-art-highcharts_api.htm"},
						{"text":"折线图等图代码","url":"http://www.highcharts.me/demo/index.php?p=10&theme=default"},
						{"text":"Highcharts","url":"http://www.highcharts.me/"},
						{"text":"Highcharts中文教程","url":"http://www.highcharts.me/docs/index.php"},
						{"text":"HighCharts系列文章说明","url":"http://www.52wulian.org/highcharts-menu/"},
						{"text":"Highcharts 中文文档翻译","url":"http://zerxd.iteye.com/blog/1542628 "},
						{"text":"ITeye3.0","url":"http://www.iteye.com/"},
						{"text":"极客标签","url":"http://www.gbtags.com/gb/gblibrary.htm "},
						{"text":"c资讯----- HTML5 开发工具 ","url":"http://www.csdn.net/article/2014-02-07/2818326-HBuilder-the-fastest-web-ide"},
						{"text":"2014年设计趋势","url":"http://blog.enqoo.com/blog/2014/01/24/2014-web-design-trends/ "},
						{"text":"博客","url":"http://blog.sina.com.cn/s/articlelist_1763356541_0_1.html"},
						{"text":"好看网站","url":"http://www.ruifox.com/"},
						{"text":"好看网站-凡科","url":"http://www.faisco.com/ "},
						{"text":"IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总 ","url":"http://www.w3cfuns.com/blog-3-5396310.html"},
						{"text":"数组具有的一系列方法用法","url":"http://www.w3cfuns.com/blog-1286-5396353.html"},
						{"text":"数组的一系列用法","url":"http://www.w3school.com.cn/js/jsref_lastindexof.asp"},
						{"text":"浏览器的重绘与重排","url":"http://www.w3cfuns.com/thread-5598410-1-1.html"},
						{"text":"收集常用的正则表达式","url":"http://www.w3cfuns.com/blog-5414721-5396487.html"},
						{"text":"手机网站前端开发布局技巧","url":"http://www.w3cfuns.com/blog-5396571-5396726.html"},
						{"text":"手机网站前端开发经验总结","url":"http://www.w3cfuns.com/blog-5396571-5396727.html"},
						{"text":"IE css bug及解决方案参考","url":"http://www.w3cfuns.com/article-5599265-1-1.html"},
						{"text":"调皮的javascript","url":"http://www.w3cfuns.com/article-1295-1.html "},
						{"text":"各类js效果集合","url":"http://popub.net:81/script/MSClass.html"},
						{"text":"前端利器啊","url":"http://alloyteam.github.io/AlloyDesigner/worddoc.html"},
						{"text":"传智php视频","url":"http://php.itcast.cn/news/caa9b58b/37b1/47f6/98e3/bd3600c98cfc.shtml"},
						{"text":"百度效果库","url":"http://gmu.baidu.com"},
						{"text":"yss的Web前端开发之旅之感之想- 博客频道 - CSDN.NET","url":"http://blog.csdn.net/do_it__?viewmode=contents"},
						{"text":"html5游戏集合","url":"http://www.dlnuhome.cn/personal_webpage/works.html"},
						{"text":"web小图标集合","url":"http://icomoon.io/app/#browse "},
						{"text":"jquery  event对象详","url":"http://www.cnblogs.com/snandy/archive/2011/06/17/2081213.html"},
						{"text":"人人FED CSS编码规范浏览器特效支持规范","url":"http://bbs.zhinengshe.com/thread-47-1-5.html"},
						{"text":"Can I use","url":"http://caniuse.com/#"},
						{"text":"TaoBaoUED学习网站","url":"http://ued.taobao.com/blog/category/bowen/frontend/?qq-pf-to=pcqq.c2c"},
						{"text":"人人都是产品经理","url":"http://www.woshipm.com/xiazai/33532.html"},
						{"text":"模板王","url":"http://www.mobanwang.com/mb/201010/9043.html"},
						{"text":"UICOC:","url":"http://www.uicoc.com/"},
						{"text":"茶图网——设计师网址导航","url":"http://hao.teapic.com/"},
						{"text":"UI设计师网址导航","url":"http://hao.uisdc.com/"},
						{"text":"COCOA CHINA  ","url":"http://www.cocoachina.com/bbs/thread.php?fid-23.html"},
						{"text":"苹果开发中文网站优艾网","url":"http://www.chinaui.com/default.shtml "},
						{"text":"设计达人—分享设计理念和资源","url":"http://www.shejidaren.com/"},
						{"text":"包含前端技术,设计灵感‘设计资源)UCD China","url":"http://ucdchina.com/"},
						{"text":"最全ps礼仪管理","url":"http://hao.uisdc.com/ps/"},
						{"text":"uehtml","url":"http://www.uehtml.com/"},
						{"text":"抠图器","url":"http://clippingmagic.com"},
						{"text":"懒人程序","url":"http://www.kuitao8.com/all_41"},
						{"text":"apress","url":"http://apress.com/book/view/1430228474"},
						{"text":"regular-expressions.info","url":"http://www.regular-expressions.info"},
						{"text":"The prototype object of JavaScript","url":"http://www.javascriptkit.com/javatutors/proto.shtml"},
						{"text":"cookie 点赞","url":"http://uncletoo.com/html/application/790.html"},
						{"text":"JQuery实现智能输入提示(仿机票预订网站)","url":"http://www.cnblogs.com/kyle_zhao/archive/2010/02/27/1674819.html"},
						{"text":"Webkit内核的浏览器默认CSS属性","url":"http://www.blogjava.net/ThinkingTalking/archive/2010/07/12/325855.html"},
						{"text":"破解无线密码","url":"http://wenku.baidu.com/view/842d8d24e2bd960590c677ce.html"},
						{"text":"工具下载站","url":"http://msdn.itellyou.cn/"},
						{"text":"bootstrap 学习中文网站","url":"http://www.bootcss.com/	"},
						{"text":"yii中文教程网址","url":"http://www.yiiframework.com/doc/guide/1.1/zh_cn/quickstart.installation"},
						{"text":"yii中文开发手册","url":"http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.convention#directory"},
						{"text":"bootstrap","url":"http://getbootstrap.com/customize/"},
						{"text":"之前做的测试版本没正式运营的网站","url":"http://bj.620866.com/counter/fangdai"},
						{"text":"学习jquery网址","url":"http://www.css88.com/jqapi-1.9/ "},
						{"text":"快捷编辑器配合sublime","url":"http://docs.emmet.io/ "},
						{"text":"bootstrap 3.2.0版本就ie8兼容","url":"http://www.ypgogo.com/Event/info/vid/54846 "},
						{"text":"Less源码","url":"https://github.com/less/less.js "}
					]; 
			
		

			var $jsondata = $("#bookmarks");
			var strHtml = '<ol>';
			$jsondata.empty();
			
			$.each(arr,function(index,bookmarks){
				//alert(this.text+" "+this.url); 
				  
				  	strHtml += '<li>'+(index+1)+'、';
					strHtml += '<a href="'+bookmarks["url"]+'" target="_blank">'+bookmarks["text"];
					strHtml += '</a></li>';
				
			})
			strHtml +='</ol>';
			$jsondata.append(strHtml);
			
			// $(arr).each(function(){ 
			// 	alert(this.text+" "+this.value); 
			// }); 
		 	
			
			$("h3").css({
				"background-color":"#f8f8f8",
				"padding":"20px"
			})
			$("ol").css({
				"list-style":"none",
				"padding":"0px",
				"margin":"0px"
			})
			$("li").css({
				"padding":"10px",
				"background-color":"#f8f8f8",
				"color":"#333",
				"height":"30px",
				"line-height":"30px",
				"margin-bottom":"20px"
			})

			$("li a").css("color",function(){ return "#333";})
			$("body").css("padding","20px 30px")
		 })
			
		</script> 
		
		
   </head>
   <body>
		<div>
			<h3>书签</h3>
			<div id="bookmarks"></div>
		</div>
   </body>
</html>


用外部获取的方式得到json数据

<!DOCTYPE html>
<html>
   <head>
   	  <meta charset="utf-8">
      <title>书签</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	
		 <script type="text/javascript"> 
		 $(function(){
		 	
			$.ajaxSettings.async = false;	//设置ajax 同步,若不设置的话,在执行getJSON的内容同时,下面的jquery也进行执行,由getJSON生成的strHtml里面的内容不能根据下面jquery设置的样式显示,在执行ol li等样式设置的时候strHtml还没有完全返回,因此执行jquery样式的时候页面找不到ol li 等元素,等strHtml返回完成后jquery设置ol li的样式也已经执行完了,所以ol li 等元素是没有样式的。因此一定要设置同步。
			$.getJSON("bookmarks.json",function(data){

				var $jsondata = $("#bookmarks");
				var strHtml = '<ol>';
				$jsondata.empty();
				
				$.each(data,function(index,bookmarks){
					//alert(this.text+" "+this.url); 
					  
					  	strHtml += '<li>'+(index+1)+'、';
						strHtml += '<a href="'+bookmarks["url"]+'" target="_blank">'+bookmarks["text"];
						strHtml += '</a></li>';
					
				})
				strHtml +='</ol>';
				$jsondata.append(strHtml);
			})
			
			$("h3").css({
				"background-color":"#f8f8f8",
				"padding":"20px"
			})
			$("ol").css({
				"list-style":"none",
				"padding":"0px",
				"margin":"0px"
			})
			$("li").css({
				"padding":"10px",
				"background-color":"#f8f8f8",
				"color":"#333",
				"height":"30px",
				"line-height":"30px",
				"margin-bottom":"20px"
			})

			$("li a").css("color",function(){ return "#333";})
			$("body").css("padding","20px 30px")
		 })
			
		</script> 
		
		
   </head>
   <body>
		<div>
			<h3>书签</h3>
			<div id="bookmarks"></div>
		</div>
   </body>
</html>

json文件

[
{"text":"条件注释判断浏览器","url":"http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html"},
{"text":"Bootstrap_带有案例","url":"http://bootstrap.kinghack.com/"},
{"text":"Bootstrap案例","url":"http://www.thinkphp.cn/topic/9261.html"}
]


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页