在jquery中使用$.each循环数组展示

2023-11-03


定义和用法
jQuery.each() 函数用于遍历指定的对象和数组。


语法
$.each( object, callback )

参数 描述
object Object类型 指定需要遍历的对象或数组。
callback Function类型 指定的用于循环执行的函数。

通过这个方法可以将工作中遇到的数据列表进行循环,简单方便,下面是我写的一个案例:

当然这个这个数组对象是我自己模拟的,实际工作中我们只需要根据后台给的数据格式来进行操作。
html:

            @foreach($data as $k=>$a)
            <li id="desc_li" class="descname">
                <div class="courselist">
                <a href="{{url('/index/course/coursecont/'.$a->cou_id)}}">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="{{$a->cou_img}}" >
                </a>
                <p class="courTit">{{$a->cou_name}}</p>
                <div class="gray">
                <span>1小时前更新</span>
                <span class="sp1">{{$a->lll}}人学习</span>
                <div style="clear:both"></div>
                </div>
                </div>
           </li>
           @endforeach
           <div class="clearh"></div>
          </ul>
    

    js:

     $.each(data,function(k,v){
            html+="<li id='desc_li' class='descname'>
             	<div class='courselist'>
             		<a  href='{{url("/index/course/coursecont/+data[k].cou_id")}}'>
             			<img width='263' style='border-radius:3px 3px 0 0;' src='"+data[k].cou_img+"' ></a><p class='courTit'>"+data[k].cou_name+"</p><div class='gray'><span>1小时前更新</span><span class='sp1'>"+data[k].lll+"人学习</span><div style='clear:both'></div></div></div></li>";
                        });
                        html+="<div class='clearh'></div>";
                        $(".courseul").append(html);
    

    效果图:
    在这里插入图片描述
    注释:希望我写的代码,能帮助到您们。

    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

    在jquery中使用$.each循环数组展示 的相关文章

    • 仿中国婚博会微信小程序

      仿中国婚博会微信小程序 app json pages pages index index pages cash cash pages marry marry pages community community pages me me pag
    • VUE项目中的全局格式化时间过滤器

      自定义格式化时间 一 问题 这是一个后台管理系统中的商品列表页 其中的时间这一项在调用接口后会发现是以毫秒来计算的 这样当然是不行的啦 要换算成我们日常使用的2020 04 07 17 13 这样的时间格式 二 解决办法 1 打开项目中的m
    • 如何正确理解JavaScript中的函数和方法

      你真的了解JavaScript的函数和方法吗 你知道它们有什么区别吗 你知道它们是如何定义和调用的吗 你知道它们是如何影响this值的吗 如果你对这些问题感到迷茫 那么本文就是为你准备的 本文将从基础开始 详细解释函数和方法的概念 特点 用
    • html中使用js实现体彩11选5随机选号

      体彩11选5随机选号 页面预览 代码实现
    • 了解如何在20分钟内创建您的第一个Angular应用

      Angular is a JavaScript framework created my Misko Hevery and maintained by Google It s an MVC Model View Vontroller You
    • js数组相加相减函数

      数组相减 reduceArray arr1 arr2 for var i arr1 length 1 i gt 0 i var a arr1 i for var j arr2 length 1 j gt 0 j var b arr2 j i
    • live-server的使用

      本地开发常常需要搭建临时的服务 第一时间我们会想到用http server 但现在流行修改文件浏览器自动刷新hot socketing 热拔插 如live reload 若想浏览器自动打开项目 用opener 现在live server实现
    • html 中的正则(基础)

      正则表达式 1 什么是 正则表达式就是专门规定一个字符串中字符出现的规律的一套规则 2 何时 2大类场景 a 验证字符串格式 b 查找敏感词 如何在js中创建正则表达式 用于查找和匹配 2种 1 标准写法 a var 变量 new RegE
    • setTimeout异步

      同步任务和异步任务 同步和异步操作的区别就是是否阻碍后续代码的执行 同步任务是那些没有被引擎挂起 在主线程上排队执行的任务 只有前一个任务执行完毕 才能执行后一个任务 异步任务是那些被引擎放在一边 不进入主线程 而进入任务队列的任务 只有引
    • 网页是如何显示在浏览器

      这两天学习了一些网页如何在浏览器中显示的知识 感觉在我向前端走的路上非常有用 所以就在这里总结一下 大家可以看看 我也算是巩固一下知识 因为自己学识太浅 内容可能有一些错误之处 希望看到的朋友可以指出来啦 在Edge浏览器也加入Chromi
    • 用于富 Web 开发的 13 个免费 JavaScript 库和插件

      在这个新的一天伴随着最新技术崛起的舞台上 让您的商业品牌绽放光芒的唯一方法就是紧跟市场流行的趋势 使用 HTML 和 JavaScript 等技术是通过其中使用的一流功能获得盈利业务的灵魂 当从技术角度谈论 JavaScript 时 考虑到
    • js获取时间戳的四种方法

    • JS修改对象属性的值

      当对象以数字为属性名时 其实就是一个数组 用 var foo 1 a 2 b foo 1 c console log foo 1 c 2 b 当对象以字符为属性名时 直接用 获取属性值 var bar a 1 b 2 c 3 bar a h
    • 微信小程序之map地图规划路线以及显示距离

      有个问题 在选择公交路线 包含步行和公交 时 怎么才能让不同的路线显示不同的颜色 ps 有个方式 自己写坐标解压往后的存入新数组 把步行时的数据标注下 有什么简单的方法呢 自定义函数文件 自动获取定位信息 function getLocat
    • Vue中key

      相信很多小伙伴跟我一样在使用v for的时候对key值的存在和必要性有疑问 通过ESlint进行代码检查的时候不加上key还会报错 想知道key为什么存在可以先想想key为什么产生 会不会是尤雨溪灵光一闪就给Vue添加上了key 也有可能
    • js formatDate 时间转换

      formatDate function time fmt type type 类型 0 时间为秒 1 时间为毫秒 var date new Date type 0 time 1000 time var o M date getMonth 1
    • UE编辑器下简单把 excel格式的表格转换为wiki支持的表格

      觉得 wiki下 mediawiki 导入excel和word表格好麻烦 微软自带的offic插件wiki转换工具一直都安装不上 为了更新wiki内容只能手动来做了后来总结了以下手动方法 1 复制编辑好的Excel表格到记事本 用ue打开
    • Vue中的import from

      Vue中的import from 大家都知道 import from 是用来引入一些文件的 在vue中 可能有 js文件 json文件 vue文件 在JS和JSON文件引入的时候 往往需要写入一些 例如数组 export const a 例
    • CocosCreator列表scrollview滑动速度的修改,鼠标滚动速度修改

      由于cocos creator 在pc端 使用scrollview 鼠标滚动速度太慢 原文地址 CocosCreator列表滑动速度的修改 简书CocosCreator列表滑动速度的修改 简书引擎版本 2 2 2 之后升级的2 4 0直接可
    • php中文乱码或html中文乱码

      参考gpt 一 在PHP中解决中文乱码问题的常见方案有以下几种 设置字符编码 在你的PHP代码中 可以使用 header 函数设置正确的字符编码 常见的字符编码是UTF 8 可以使用以下代码将页面的字符编码设置为UTF 8 header C

    随机推荐

    • [orin] nvidia orin 上安装 pytorch 和 torchvision 实操

      请看这个博主写的链接 写的非常好 目前我已经安装成功了 不同的是我是在Anaconda虚拟环境中安装的 原博客链接 https blog csdn net beautifulback article details 125717717 这次
    • TEASER-plusplus 安装

      https github com MIT SPARK TEASER plusplus 下载https codeload github com MIT SPARK TEASER plusplus zip v2 0 下载GoogleTest太慢
    • 测试开发概念篇

      目录 前言 几个常见的名词 需求 什么是BUG 测试用例 软件生命周期 开发模型 瀑布模型 螺旋模型 增量和迭代模型 敏捷模型 前言 什么是软件测试 软件测试就是验证产品特性是否满足用户需求 开发软件是为了盈利 必须满足用户才会盈利 测试和
    • LiunxQT开发篇—QT网络编程TCP实现(三)客户端代码

      需要包含三个头文件 include
    • 操作系统——第2章 操作系统用户界面

      目录 第2章 操作系统用户界面 基本概念 系统调用 基本概念 执行过程 第2章 操作系统用户界面 基本概念 一般将计算机系统的用户分为两类 使用和管理计算机应用程序的用户 包括普通用户与管理员用户 程序开发人员 操作系统为第一类用户提供命令
    • 日本半导体行业衰落的原因分析

      90年代初 半导体市场几乎是日本厂商的天下 在排名前十的半导体公司里曾经有6家是日本公司 日本半导体行业衰落的原因分析 那什么导致了今天日本半导体产业的衰落 来看看一些知名调查机构的分析 罪魁祸首1 高层管理人员的傲慢 我们谈过的许多行业观
    • hyperledger fabric Failed to generate orderer genesis block

      当使用configtxgen工具进行生成创世区块和channel tx等时出现错误 具体如下 Generating Orderer Genesis block
    • 解决:Echarts打包后出现白屏

      Echarts打包后出现白屏 原因 这是由于图表的容器节点被移除导致的 即使之后该节点被重新添加 图表所在的节点也已经不存在了 解决方法 利用钩子函数在页面销毁之前将其销毁即可 import onBeforeUnmount from vue
    • QT学习之经典控件源码(如此强大)

      进来好好学习了QT 研究了很多别人的源码 在绘图方面原来QT也是如此强大 源码下载 Files feiyangqingyun myValueControl zip FROM http www cnblogs com feiyangqingy
    • 自动化测试(四):pytest结合allure生成测试报告

      Allure 报告框架的名称 allure noun U 诱惑 魅力 吸引力 文章目录 1 allure下载 2 pytest框架使用allure 3 生成allure报告 1 allure下载 下载前需要先安装JDK 这里可以参考自动化测
    • 图的常用遍历——广度优先遍历和深度优先遍历

      目录 一 遍历图可能遇到的问题 二 图的常用遍历 三 深度优先遍历 DFS 四 广度优先遍历 BFS 一 遍历图可能遇到的问题 图的特点 图中可能存在回路 且图的任一顶点都可能与其它顶点相通 在访问完某个顶点之后可能会沿着某些边又回到了曾经
    • Qt中嵌入web网页的几种实现方式

      1 背景 Web网页的界面交互相比较Qt客户端而言有着比较大的优势 更加的多样化和更高的使用便捷性使得我们即使在客户端中也可以考虑将web网页嵌入到客户端的界面当中 如此便能将web的优势和客户端进行结合 更加丰富客户端的界面及功能 以下将
    • 小程序项目实战(三)

      此文章用于总结自己的知识点 有这个项目有兴趣的伙伴可以点击下方链接购买学习 小程序音乐项目开发实战 大神coderwhy新课 学习视频教程 腾讯课堂课程简介正在上传 重新上传取消https ke qq com course 4162214h
    • mysql数据库里空值变成0_MySQL数据库 null转为0,及一些case when用法

      1 如果为空返回0 select ifnull null 0 应用情景 如果在进行右连接或者左连接时 有一些为空的字段 可以进行这样的处理 select ifnull B submission time A submission time
    • 互联网时代知识付费如何卖课——Python卖课指南

      Python卖课指南 Python作为一门流行且广泛应用的编程语言 吸引了越来越多的人加入学习Python的行列 因此 通过卖课来教授Python编程技巧成为了许多人的选择 在这篇博客中 我们将详细介绍如何成功地卖出Python课程 以下是
    • 关于STM32WB55一些测评评价

      关于STM32WB55一些测评评价 部分内容转载自http bbs eeworld com cn thread 1076335 1 1 html 简单介绍下 STM32WB系支持无线功能的双核 MCU 内嵌 工作频率为 64 MHz 的 A
    • Docker-compose配置springboot项目

      Docker compose从入门到入土 准备环境 一 在springboot添加docker插件 1 安装docker插件 2 在pom xml中添加配置 二 在项目下创建docker文件 1 Dockerfile 2 docker co
    • java.lang.NoClassDefFoundError: Could not initialize class org.apache.hadoop.hbase.util.ByteStringer

      java lang NoClassDefFoundError Could not initialize class org apache hadoop hbase util ByteStringer java lang NoClassDef
    • 【Qt】样式表的使用——设置样式的方法

      Qt 之 样式表的使用 设置样式的方法 一 简述 二 开始总结 1 先谈谈我们设置样式有几种方法 a 最简单 也是最直接 在Qt Designer 中添加样式 b 在代码中添加样式 c 将样式写在文件中 通过读取文件的方式设置样式 2 再谈
    • 在jquery中使用$.each循环数组展示

      定义和用法 jQuery each 函数用于遍历指定的对象和数组 语法 each object callback 参数 描述 object Object类型 指定需要遍历的对象或数组 callback Function类型 指定的用于循环执