js for循环 和 jq $.each() 遍历数组

参考文献
1、$.each()方法循环显示购物车列表;
2、$.each()方法来循环一个数据列表;

for 循环:

// 新闻
function inFormation() {
    var information = [
        {
            imge: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395395711,851131180&fm=27&gp=0.jpg',
            title: '资讯要闻标题资讯要闻标题资讯要闻标题资讯要闻标题。',
            time: '12.12'
        },
        {
            imge: 'http://i.weather.com.cn/images/shanxi/sxsy/tygjmls/2013/09/26/A63C77AC9AAAD095F467BD72758AE968.jpg',
            title: '资讯要闻标题资讯要闻标题资讯要闻标题资讯要闻标题。',
            time: '12.12'
        },
        {
            imge: 'http://img3.cache.netease.com/photo/0001/2009-09-14/5J6G8BHU0G5V0001.JPG',
            title: '资讯要闻标题资讯要闻标题资讯要闻标题资讯要闻标题。',
            time: '12.12'
        },
        {
            imge: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395395711,851131180&fm=27&gp=0.jpg',
            title: '资讯要闻标题资讯要闻标题资讯要闻标题资讯要闻标题。',
            time: '12.12'
        }
    ];
    
    var MarHtml = [];
    for (var i = 0; i < information.length; i++) {
        if(information[i]) {
            MarHtml += '<a href="videoinfo.html" class="information-hd-item">' +
                        '<div class="information-img">' +
                        '<img class="img" alt="information.png" src=" '+ information[i].imge +' "/>' +
                        '</div>' +
                        '<div class="information-content">' +
                        '<div class="information-title ellipsis-2">' + information[i].title + '</div>' +
                        '<div class="information-time">' + information[i].time + '</div>' +
                        '</div>' +
                        '</a>'
                        
        }
        
    }
    //console.log(MarHtml)
    $('#informationList').append(MarHtml);
};

$.each() 循环:

//特点
var trait = [
    {
        title:"专业服务医药公司",
        type:"HKL支持公司作为专业服务医药公司,在整个阿联酋有七十三个医疗中心医疗站,将来能实现用HKL在各医疗站支付服务。"
    },
    {
        title:"底链支撑工业级与金融级",
        type:"HKL底链支撑工业级与金融级应用可以实现每秒2000次的TPS 且可持续的交易,支撑表单数据、实时数据等录入。"
    },
    {
        title:"高效率",
        type:"HKL网络中的智能合约、认证和数字合规可将个体交易层面的信任整合起来,优化交易各方的关系,极大地提高生态系统中业务互动的效率。"
    },
    {
        title:"与时俱进",
        type:"HKL智能合约指导下的活动执行起来将会更迅捷、更高效。并且由于具有分布式特性,HKL区块链可以与时俱进,保持自我可持续能力。"
    }
];
var MarHtml = '';
$.each(trait, function(i, val) {
    MarHtml += '<div class="trait-list-item">' +
                '<p class="color-gray">HKL的特点</p>' +
                '<h1>' + trait[i].title + '</h1>' +
                '<p>' + trait[i].type + '</p>' +
                '</div>'
});
$('#traitListContent').append(MarHtml);

示例:

<div id="active">
	<ul class="shop_box">

	</ul>
</div>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {      
	var con = [         {            
					"image1": "img/1524880084962.jpg",
		            "shopName": "黑花生(100g*15袋/盒)",
		            "price": 190,
		            "markPrice": 200         
	},           {            
					"image1": "img/1524879960117.jpg",
		            "shopName": "黑花生(100g*15袋/盒)",
		            "price": 190,
		            "markPrice": 200         
	},           {            
					"image1": "img/1524879605807.jpg",
		            "shopName": "黑花生(100g*15袋/盒)",
		            "price": 190,
		            "markPrice": 200         
	},           {            
					"image1": "img/1524879181488.jpg",
		            "shopName": "黑花生(100g*15袋/盒)",
		            "price": 190,
		            "markPrice": 200         
	}               ];
	var html = "";
	$.each(con, function(i,v) {
		html += '<li class="shopBox">' +
				'<div class="shopListName">' + con[i].shopName +'</div>'
	});
	$(".shop_box").append(html);
})
</script>

访问数据库:

$(“demo_pull”).inerHTML = str;
js for循环 和 jq $.each() 遍历数组