当前位置: 首页 > news >正文

$().each和$.each的区别

1.$(selector).each(function(index,element))

作用:在dom处理上面用的较多 (html 元素、节点)

示例:

遍历数组。html部分文档

<ul id="each_id">
<li>Coffee</li>
<li>Soda</li>
<li>Milk</li>
</ul>

js遍历函数:

function traversalDOM(){
    $("#each_id li").each(function(){
       alert($(this).text())
    });
}

输出结果:

2.$.each(dataresource,function(index,element))

作用:在数据处理上用的比较多

示例:

遍历JSON 对象。此处没有html代码,只有js代码,如下:​​​​​​​

function traversalData(){
    var jsonResourceList ='[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"}]';

    //JSON.parse() 把json字符串转化为一个对象
    //遍历JSON 数据
    if(jsonResourceList.length >0){
        $.each(JSON.parse(jsonResourceList),function(index,obj) {
            alert(obj.tagName);
        });
    }
}

输出结果:

3.最终结论:

在遍历DOM时(如数组),通常用$(selector).each(function(index,element))函数;

在遍历数据时(如JSON 对象),通常用$.each(dataresource,function(index,element))函数。

相关文章:

  • masm汇编器以及汇编流程
  • 汇编语言JMP和LOOP(转移)指令
  • 汇编相关运算符和指令
  • PN结
  • 汇编语言过程
  • JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val() ?
  • 操作系统相关
  • 编译和链接
  • 目标文件里有什么?
  • JS setTimeout和setInterval的区别
  • JavaScript 变量提升
  • JavaScript 调试
  • JavaScript 库(框架)
  • Cefsharp js调用c#与c#调用js
  • JavaScript之Window 对象
  • [ JavaScript ] 数据结构与算法 —— 链表
  • in typeof instanceof ===这些运算符有什么作用
  • MySQL数据库运维之数据恢复
  • Python 基础起步 (十) 什么叫函数?
  • supervisor 永不挂掉的进程 安装以及使用
  • Vue.js 移动端适配之 vw 解决方案
  • vue.js框架原理浅析
  • Vue.js源码(2):初探List Rendering
  • vue-cli在webpack的配置文件探究
  • vue中实现单选
  • 将 Measurements 和 Units 应用到物理学
  • 解析带emoji和链接的聊天系统消息
  • 开源SQL-on-Hadoop系统一览
  • 来,膜拜下android roadmap,强大的执行力
  • 利用DataURL技术在网页上显示图片
  • 新版博客前端前瞻
  • 学习ES6 变量的解构赋值
  • 以太坊客户端Geth命令参数详解
  • 用element的upload组件实现多图片上传和压缩
  • 智能网联汽车信息安全
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • Python 之网络式编程
  • ​二进制运算符:(与运算)、|(或运算)、~(取反运算)、^(异或运算)、位移运算符​
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #if #elif #endif
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (16)Reactor的测试——响应式Spring的道法术器
  • (Java实习生)每日10道面试题打卡——JavaWeb篇
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (二)hibernate配置管理
  • (规划)24届春招和25届暑假实习路线准备规划
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (转)Sublime Text3配置Lua运行环境
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • ..回顾17,展望18
  • .Net 6.0 处理跨域的方式
  • .NET Compact Framework 3.5 支持 WCF 的子集
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler