jquery中object对象循环遍历的方法

一个朋友问对象如何转为数组，当我问他为啥要转得时候，他告诉我，数组可以用js循环遍历，而对象则不可以。其实呢，对象同样可以循环遍历的啊。不用转换也可以循环！说明你对js或者jquery的某些操作不是很熟练！在这里我简单介绍一下！

案例

我们看如下对象：

var data={
  张三：69，
  李四：72，
  王五：90，
  二麻子：88，
  前端博客：100，
  haorooms : 98,
  王大壮：99
}

假如上面是后台返回的一个key，一个是value的对象（这种对象相信大家经常遇到吧！），现在要把这个内容，循环绑定到一个表格中。有的朋友对对象的循环就不知道怎么操作了！今天我给大家介绍两个方法！

方法一：

用$.each的方式进行循环！

假如你不知道$.each的话，建议大家网上搜一搜。当然也可以搜索一下“jquery的$().each,$.each的区别”，关于他们的区别，我在这里就不详细介绍了。可能有的朋友$().each这个方式用的比较多，今天主要给大家介绍$.each。

$.each()可以遍历数组和对象。方式如下：

$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n)
{
alert(“索引:”+i,”对应值为：”+n.name);
});

也可以这么遍历：

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});

输出：one   two  three  four   five
最爽的是可以遍历数组：

var obj =data;//上面复制的data
$.each(obj, function(key, val) {
alert(obj[key]);//可以输出成绩
console.log(key);//可以输出姓名
});

方法二：

用for in循环，可以遍历obj

对上面的对象，我们可以这么写来循环！

for(var i in data){
 console.dir(i);//输出姓名
 console.dir(data[i]);//输出分数
}

for in循环相信大家应该不陌生！for循环我们用到比较多的是for(var i=0;i<array.length;i++)这样，这个主要是针对数组来循环的。对于对象，我们通常用for in循环！

另外，假如我们遇到如下对象：

var data={
  张三：69，
  李四：72，
  王五：90，
  二麻子：88，
  前端博客：100，
  haorooms : 98,
  王大壮：99
}

我们可以用data.haorooms得到98,但是我们用“data.前端博客”会报错，因此，在我们用汉字做key值的时候，选取的时候应该用data["前端博客"],这种方式来选择，不要再用点号了。

以上就是jquery中object对象循环遍历的方法，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • jquery表单对象属性过滤选择器实例分析

    本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • JS/Jquery判断对象为空的方法

    发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是否为空,等价于检查对象中有没有键值对.写成代码,形如: if (isEmptyObject(obj)) { // obj is empty } else { // not empty } 至于 isEmptyObject 的实现,jQuery 中有一个很有想法的方式,请看代码: function i

  • jquery操作angularjs对象

    jquery操作angularjs对象

    jquery是一个非常强大的js框架,angularjs是一个非常牛的前端mvc框架.虽然用其中的任何一个框架在项目中够用了,但是有时候这两个框架需要混合着用,虽然不推荐.但有时候混合用时,却非常方便,不要考虑那么多,只要能实现功能,何乐而不为? 最近做的一个产品,前端用angularjs,但表格框架用的却是jquery.datatables.js,当然其中少不了碰到jquery与angularjs交互问题.由于公司保密,我就不用真实项目演示了,写个小demo吧,当然真实的项目要复杂得多. <!

  • 使用jQuery在对象中缓存选择器的简单方法

    当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素.当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法. 让我们看一个例子, jQuery(document).ready(function() { jQuery('#some-selector').on('hover', function() { jQuery(this).fadeOut('slow').delay(400).fadeIn(); console.log(jQuery(this

  • jquery方法+js一般方法+js面向对象方法实现拖拽效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery解析json格式数据的方法(对象、字符串)

    本文实例讲述了jquery解析json格式数据的方法.分享给大家供大家参考,具体如下: json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 一.jQuery解析Json数据格式: 使用这种方法,你必须在Ajax请求中设置参数: dataType: "json" 获取通过回调函数返回的数据并解析得到我们想要的值,看源码: jQuery.ajax({ url: full_url, dataType

  • jquery采用oop模式class类的使用示例

    本文实例讲述了jquery采用oop模式class类的使用方法.分享给大家供大家参考,具体如下: 这里用class来管理jquery的各个function,我觉得很方便,并且代码可读性也很强.以前我喜欢建文件写function,再包括文件,到后来找一个function就比较麻烦了.没有用class来管理function方便.费话不多说了. 一.oop.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

  • jquery中object对象循环遍历的方法

    一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下! 案例 我们看如下对象: var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99 } 假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这

  • jQuery中判断对象是否存在的方法汇总

    如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的. if($("#id")){ //... }else{ //... } 因为 $("#id") 不管对象是否存在都会返回 object . 正确使用判断对象是否存在应该用: if($("#id").length>0){ //... }else{ //... } 使用 jQuery 对象的属性 length 来判断,如果 > 0 就存在. 或者 if($("#i

  • linux shell 中数组的定义和for循环遍历的方法

    linux shell中的语法和普通编程语言 c/c++ java 的不太一样,平时用的不多,所以总是记不住,写脚本才会去查怎么用. 今天突然被问到数组怎么去遍历.平时写shell脚本也经常遍历数组,但是一下没答上来,被鄙视了. 所以平时学习还是好好总结吧,不能每次都问度娘谷爷.IT 知识体系较为庞大,细节的东西也太多,平时遇到问题应该的多总结记笔记. linux 中定义一个数据的语法为: variable=(arg1 arg2 arg3 ....) 中间用空格分开.数组的下标从0开始. 1 获

  • jQuery中ajax的load()与post()方法实例详解

    本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定

  • js 实现获取name 相同的页面元素并循环遍历的方法

    实例如下: <input type="hidden" name="blues" value="蓝色浏阳河之最"> <input type="hidden" name="blues" value="蓝色浏阳河之亲"> <input type="hidden" name="blues" value="蓝色浏阳河之

  • jQuery查看选中对象HTML代码的方法

    本文实例讲述了jQuery查看选中对象HTML代码的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jquery中的常见问题及快速解决方法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click(function(){ $.ajax({ do something }); return false; }) 2 去除选中元素的某一个属性使用removeattr 3 javascript中与时间相关的函数有setInterval("function",millisec[,"la

  • 详解python中字典的循环遍历的两种方式

    开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python3中,下面两种方法都是通用的. 1. 只对键的遍历 一个简单的for语句就能循环字典的所有键,就像处理序列一样: d = {'name1' : 'pythontab', 'name2' : '.', 'name3' : 'com'} for key in d: print (key, ' value

  • Java 中Object的wait() notify() notifyAll()方法使用

    Java 中Object的wait() notify() notifyAll()方法使用 一.前言 对于并发编程而言,除了Thread以外,对Object对象的wati和notify对象也应该深入了解其用法,虽然知识点不多. 二.线程安全基本知识 首先应该记住以下基本点,先背下来也无妨: 同一时间一个锁只能被一个线程持有 调用对象的wait()和notify()前必须持有它 三.wait()和notify()理解 3.1 wait()和notify()方法简介 wait()和notify()都是

  • JS中Object对象的原型概念基础

    JS中Object对象的原型概念基础

    对象概念 在 javascript 中, 一切引用类型均为对象. 如 function Foo () {} 中,Foo本身就是一个对象的引用. 创建对象方式 字面量方式 new 构造函数函数声明 Object.create 字面量对象 javascript语言级别快速创建对象的实例 var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量 var obj2 = [obj, 'foo', 'bar']; // Array数组字面量 var obj3 =

随机推荐