js 循环遍历div层

最新推荐文章于 2023-10-13 10:29:03 发布
最新推荐文章于 2023-10-13 10:29:03 发布
阅读量8.6k 收藏 3
点赞数 4
分类专栏： JavaScript/Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxf1242652895/article/details/53861404
版权 
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
            <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
                <!DOCTYPE html>
                <html lang="en">
                    
                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                        <!-- Meta, title, CSS, favicons, etc. -->
                        <meta charset="utf-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <title>
                            机器看板
                        </title>
                        <!-- Bootstrap -->
                        <link href="../../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
                        <!-- Font Awesome -->
                        <link href="../../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
                        <!-- NProgress -->
                        <link href="../../vendors/nprogress/nprogress.css" rel="stylesheet">
                        <!-- Custom Theme Style -->
                        <link href="../build/css/custom.min.css" rel="stylesheet">
                        <script src="../../vendors/jquery/dist/jquery.min.js">
                        </script>
                    </head>
                    <style>
                        .nomorlcolor {color:green;} /** 正常**/ .waitcolor {color:red;} /** 待机 **/
                        .unlinkcolor {color:gray;} /** 断开 **/ .tiaojicolor {color:blue;} /** 调机
                        **/ .othercolor{color:orange;font-size:26px;white-space: nowrap;}/** 其他
                        **/
                    </style>
                    
                    <body>
                        <div class="row top_tiles" id="kanbanID">
                        </div>

  
             
  <script type="text/javascript">
    var list;
    $(document).ready(function() {
        var data = [{
            "machCode": "1#",
            "machStatus": "正常",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "2#",
            "machStatus": "调机",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "3#",
            "machStatus": "关机",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "4#",
            "machStatus": "待机",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "5#",
            "machStatus": "修模",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "6#",
            "machStatus": "首件",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "7#",
            "machStatus": "正常",
            "mouldCode": "null",
            "productUnits": "0",
            "scheduledProductUnits": "0",
            "scheduledEndTime": "null",
            "goodUnits": "null"
        },
        {
            "machCode": "8#",
            "machStatus": "待机",
            "mouldCode": null,
            "productUnits": "0",
            "scheduledProductUnits": "1",
            "scheduledEndTime": null,
            "goodUnits": "0"
        },
        {
            "machCode": "9#",
            "machStatus": "调机",
            "mouldCode": null,
            "productUnits": "0",
            "scheduledProductUnits": "1",
            "scheduledEndTime": null,
            "goodUnits": "0"
        }];
        for (var i in data) {
            list = data[i];
            if (list.machStatus == "正常") {
                $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa-refresh fa-spin fa-3x fa-fw nomorlcolor">' + '</i>' + '</div>' + '<div class="count nomorlcolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
            } else if (list.machStatus == "调机") {
                $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa fa-hand-pointer-o tiaojicolor">' + '</i>' + '</div>' + '<div class="count tiaojicolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
            } else if (list.machStatus == "待机") {
                $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa fa-clock-o waitcolor">' + '</i>' + '</div>' + '<div class="count waitcolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
            } else if (list.machStatus == "断开") {
                $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<i class="fa fa fa-unlink unlinkcolor">' + '</i>' + '</div>' + '<div class="count unlinkcolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
            } else {
                $('#kanbanID').append('<div class="animated flipInY col-lg-2 col-md-3 col-sm-6 col-xs-12">' + ' <div class="tile-stats">' + '<div class="icon">' + '<h2 class="fa fa fa  othercolor">' + list.machStatus + '</h2>' + '</div>' + '<div class="count othercolor">' + list.machCode + '</div>' + '<h3>' + list.mouldCode + '</h3>' + '<p>' + list.productUnits + '</p>' + '<p>' + list.scheduledProductUnits + '</p>' + '<p>' + list.scheduledEndTime + '</p>' + '</div>' + '</div>');
            }


            document.getElementById("kanbanID").innerHTML;
        }
    });
</script>


        
           
       </body>
</html>
i秋风伴落叶
关注
专栏目录
layuiAdmin循环遍历展示商品图片列表的方法
10-16
首先，循环遍历的主体是通过Layui的循环遍历函数layui.each()来实现的。这个函数遍历一个对象或数组，每次遍历都提供当前项（item）和索引（index），在遍历过程中对每个商品对象进行处理。 在LayuiAdmin中，动态...
JS遍历DIV里的东西
shixin0510的专栏
11-23 3047
<br />我们写JS的时候有时候需要带上控件的名称或者ID  但是这样的话 有时候使用不是很方便<br />  如果名字太多的话 方法就显得不够好了， 那么这个时候如果是同一个div下的所有的一个类型的控件需要<br />去执行相同的方法的话 那么我们就要遍历去得到div下面的内容的值了 <br />  下面是一段代码展示 如何调用  <br />    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
js中forEach，for in，for of循环的用法
weixin_30648963的博客
04-18 444
一、一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); } 二、用for in的方遍历数组 for(let index in array) { ...
javascript 循环嵌套
m0_63694206的博客
06-14 648
2.输出5层的直角三角形 3.使用for实现数组元素的反转 4.输出10层倒直角三角形 5.模拟陪媳妇逛街 6.等腰三角形 7.乘法表 8.倒立等腰三角形 9.菱形
js原生获取某个div下的所有子节点
小橙的博客
12-21 7264
var parentNode = document.getElementById('wrapper'); var inputArray = parentNode.getElementsByTagName('input');
HTML js for循环实现多个div
breakCSDN的博客
10-30 7416
HTML有时会写大概相同的超多div，费时费力。在这里记一下使用js实现的小技巧。
原生js动态渲染循环div
u013361179的博客
06-23 2575
原生js动态渲染循环div
js 进行循环遍历的操作
爱吃秋刀鱼的猫
06-13 623
js 进行循环遍历的操作 假设小明刚期末考试完，一共考了7科，这7科的成绩分别为：A,A,B,B,C,B,B,接下来我们会对这7个科目进行简单的统计，主要用到的还是JS的循环遍历，JS的循环遍历虽然用的相对较少，但还是相当重要的。 AABBCBB <div class="sj_List"> <div class="sj_List_Con"> <div class="sj_Tit1">A</div> </div> &l
vue改变循环遍历后的数据实例
10-16
首先，文章标题“vue改变循环遍历后的数据实例”直接点明了内容的中心，即在Vue项目中如何处理循环遍历得到的数据，并且在数据改变后更新视图。这是一个实际开发中非常常见的需求，比如在表格数据展示、列表渲染等...
js循环改变div颜色具体方法
12-12
在使用javascript过程中，想循环遍历一个数组，经常使用的语法有两种： 代码如下: for (var i; i  <html> <head> <style> #button{text-align:center;} #outer{width:330px; height:100px; ...
解决vuejs 使用value in list 循环遍历数组出现警告的问题
12-29
在使用vuejs遍历数组的时候，使用in语句形式，会有一个警告的提示： 警告很明显说是少了v-bind:key,所以添加一个就ok了,看如下文件： /* eslint-disable */ <div class=hello xss=removed> (value,key,index)...
jQuery循环遍历子节点并获取值的方法
10-22
本篇文章将详细讲解如何使用jQuery来循环遍历子节点并获取它们的值，这在处理复杂页面结构时尤其有用。 首先，我们来看一个简单的HTML示例，包含一个`<div>`元素，其中嵌套了多个`<ul>`列表和`<li>`列表项： ```...
JS 获取div中的子节点中的所有的节点，并添加一个class
weixin_39273589的博客
10-13 769
要获取div中的所有子节点并添加一个class，可以使用JavaScript的DOM操作。属性获取所有子节点。然后，我们遍历所有子节点，并仅处理元素节点（即标签节点）。方法来给每个元素节点添加一个class，这里我们给它添加了名为。上述代码中，我们首先获取目标div节点，并使用。这样，所有子节点都会被添加上这个class。
JavaScript之获取父级元素和子集元素
fsLees的博客
03-27 9084
获取父级元素和子集元素
DOMDocument 属性和方法
11-09 982
 最近发现DOMDocument对象很重要,还有XMLHTTP也很重要注意大小写一定不能弄错.属性:  1Attributes     存储节点的属性列表(只读) 2childNodes     存储节点的子节点列表(只读) 3dataType     返回此节点的数据类型 4Definition     以DTD或XML模式给出的节点的定义(只读) 5Doctype     指定
div组件使用v-for遍历对象
qq_42340235的博客
10-25 2408
div组件使用v-for遍历对象
js循环输出div
饭桶一生奋斗
04-19 5435
body部分：<div >点我</div> <div> </div>js代码： <script src="jquery1.4.2.js" type="text/javascript"></script> <script> $(function(){ $('div:first').click(function(){ $('div:last').after("<div
html循环div,javascript – 使用For循环附加具有多个子Div的Div
weixin_34722747的博客
06-10 1535
我意识到这已经被问了一百万次……但是我找到了所有的那些,我找不到一个能够很好地解释它的东西.JS：var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o","p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];var ta...
js json字符串转json 对象
热门推荐
秋风伴落叶
12-12 5万+
var data = [{ "id": 1, "startTime": "2017-12-12 10:36:50", "endTime": "2018-02-02 00:00:00", "value": "0.26", "jobCode": "zd_test_02_171212103650"
vue循环遍历多层数组回显
最新发布
09-25
在Vue.js中，如果你需要遍历一个多层数组并将其内容显示出来，可以使用`v-for`指令配合嵌套的`v-for`或对象的`props`来实现。假设你有一个结构类似这样的多层数组： ```javascript data() { return { items: [ { id: 1, name: 'Parent 1', children: [ { id: 11, name: 'Child 11' }, { id: 12, name: 'Child 12' } ] }, { id: 2, name: 'Parent 2', children: [ { id: 21, name: 'Child 21' }, { id: 22, name: 'Child 22' } ] } ] }; } ``` 你可以这样在模板中循环遍历： ```html <template> <div v-for="parent in items"> <h3>{{ parent.name }}</h3> <ul> <li v-for="child in parent.children"> {{ child.name }} </li> </ul> </div> </template> ``` 在这个例子中，外层的`v-for`遍历每个父级元素，而内层的`v-for`则遍历每个父级的子元素。这样就可以逐层回显数组的内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值