二维数组的遍历和dom循环创建

发的第一篇博客,新手一枚,有错误的,勿喷。

最近在写关于购物车的本地存储的前端技术,这里是关于如何把一个二维数组内部的信息呈现在页面上。

一般来说本地存储时,存储的是关于店铺的信息和店铺内部商品的信息.本地存储时把数组转换成Json串存储的。这里为了方便是直接创建的一个二维数组

var product = [{shopId:100,shopNm:‘红石榴‘,productList:[{goodsId:1,goodsNm:"苹果7",goodsNum:"1"}]},{shopId:101,shopNm:‘红苹果‘,productList:[{goodsId:2,goodsNm:"苹果5",goodsNum:"2"},{goodsId:3,goodsNm:"苹果6",goodsNum:"2"}]},{shopId:101,shopNm:‘红苹果‘,productList:[{goodsId:2,goodsNm:"苹果5",goodsNum:"2"},{goodsId:3,goodsNm:"苹果6",goodsNum:"2"},{goodsId:2,goodsNm:"华为",goodsNum:"2"},{goodsId:2,goodsNm:"小米",goodsNum:"2"}]}];

定义了一个商品信息列表,内部不同的商店,不同商品。数组内部是对象,一个对象对应一个店铺,店铺内部有商品信息。若是有不同商品会添加到productList内部。

现在关键是循环添加,信息.先在页面内部给商品布局。然后创建。

for (var i = 0; i < product.length; i++) {
            var dom = ‘<div class="shop"><div class="shop_top"><div class="shop_name">商店名称:‘+product[i].shopNm+‘</div></div></div>‘;
            $(‘body‘).append(dom);
            for (var j = 0; j < product[i].productList.length; j++) {
            var list = ‘<div class="shop_center"><div class="goods_name">商品名称:‘+product[i].productList[j].goodsNm+‘</div><div class="goods_num">商品数量:‘+product[i].productList[j].goodsNum+‘</div></div>‘;
            $(‘.shop‘).eq(i).append(list);
            }
        }

这个是循环创建的两层for循环,值得提出的是,因为是二维数组,所以这里可以说是添加了两次!第一层循环的时候,先把所有的商店信息添加,然后第二层for循环添加商店内部的商品信息,有人可能要问,为什么不都在第二层循环添加,如果是都在第二个for循环添加的话,那么就是一个商店和一个商品呈现出来,也就是说,同个商店下的商品不会合并在该商店下面.

这里用到eq()方法,他的目的是只将对应商品放到对应商店下面。

这里只是简单的呈现。

最后关于html代码部分是这样的:

<div class="shop">
            <div class="shop_top">
                <div class="shop_name">商店名称</div>
            </div>
            <div class="shop_center">
                <div class="goods_name">商品名称</div>
                <div class="goods_num">商品数量</div>
            </div>
        </div>

这样就可以把一个二维数组内部的的信息用JQuery来动态添加到页面上,同理,也可以添加三维数组的信息。

时间: 2024-10-20 07:20:56

二维数组的遍历和dom循环创建的相关文章

二维数组的遍历

方法1: 1 /************************************************************************* 2 > File Name: ptrmulti.c 3 > Author: Mr.Yang 4 > Purpose:使用指针来将数组传递给函数 5 > Created Time: 2017年06月04日 星期日 08时51分15秒 6 *******************************************

23:二维数组回形遍历

23:二维数组回形遍历 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按回形从外向内顺时针顺序遍历整个数组.如图所示: 输入 输入的第一行上有两个整数,依次为row和col.余下有row行,每行包含col个整数,构成一个二维整数数组.(注:输入的row和col保证0 < row < 100, 0 < col < 100) 输出 按遍历顺序输出每个整数.每个

二维数组的遍历之查漏补缺

//二维数组的遍历public class Test10 { public static void main(String[] args) { int arr[][]={{1,2,3},{4,5},{6,7,8,9}}; for(int x=0;x<arr.length;x++){ for(int y=0;y<arr[x].length;y++){ System.out.print(arr[x][y]+"\t"); } System.out.println(); } }}

对二维数组的遍历求和

二维数组的遍历,求和 int [] [] s = {{1,2,3,4},{5,6,7,8,3,3},{9,10,11,12}}; int sum=0; for (int i = 0; i < s.length; i++) { for (int j = 0; j < s[i].length; j++) { sum+=s[i][j]; } } System.out.println(sum); Console:84; 原文地址:https://www.cnblogs.com/fengxia/p/10

Undefined offset原因以及解决办法-php利用for遍历二维数组方法-二维数组怎么遍历

<?php $arr3 = [ [1,2,3], [4,5,6,7], [8,9,10,11,12], ]; $len = count($arr3); $num2 = 0; $zong = 0; for($i = 0; $i < $len; $i++) { $tem = $arr3[$i]; $len2 = count($tem); for($j = 0; $j < $len2; $j++) { $num2 += $tem[$j]; $zong++; } } echo "<

Openjudge-NOI题库-二维数组回形遍历

题目描述 Description 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按回形从外向内顺时针顺序遍历整个数组.如图所示: 输入输出格式 Input/output 输入格式:输入的第一行上有两个整数,依次为row和col.余下有row行,每行包含col个整数,构成一个二维整数数组.(注:输入的row和col保证0 < row < 100, 0 < col < 100)输出格式:按遍历顺序输出每个整数.每个整数占一行. 输入输出样例 Sam

二维数组回形遍历

http://noi.openjudge.cn/ch0108/23/ 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按回形从外向内顺时针顺序遍历整个数组.如图所示: 输入输入的第一行上有两个整数,依次为row和col.余下有row行,每行包含col个整数,构成一个二维整数数组.(注:输入的row和col保证0 < row < 100, 0 < col < 100)输出按遍历顺序输

汇编学习:二维数组遍历

作为正式接触汇编的开篇,本文将研究二维数组的遍历问题.在图像处理中,通常需要遍历图像像素(即二维数组).下面给出三个版本的遍历函数,并研究他们的汇编代码(VC2010编译器,x86版,Release模式). (1)在两层循环内每次根据行列索引计算元素位置. (2)为了避免在内存循环内的乘法计算,可在每次外层循环中计算好行起始地址,内层循环每次执行++操作. (3)将外层循环的乘法操作也去掉,在循环外部先计算好数组的起始地址,内层循环每次执行++操作即可. 测试程序实现对图像的反相操作(即B=25

二维数组(声明以及遍历)

首先图面理解二维数组(数组里面的元素不是字符或者数字类型而是另外一个数组)! 一,二维数组的声明 int[ ] [ ] arr; 初始化一个能存3个一维数组的二维数组 arr = new int [3] [ ];  (此时只声明了一个二维数组的空间,并没有声明一维数组的空间哈!!) 赋值: [3]赋值 int[] arr1 = {1,3,4,5}; int[] arr2 = {1,3,4}; int[] arr3 = {2,1,6,4}; arr[0] = arr1; arr[1] = arr2