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循环!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数组
对象
jquery 循环遍历对象、jquery object 遍历、java 遍历object对象、遍历jsonobject对象、js遍历object对象,以便于您获取更多的相关知识。

时间: 2024-09-20 00:46:43

jquery对象object循环遍历的方法的相关文章

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

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

json解析对象,循环遍历

问题描述 json解析对象,循环遍历 使用jsonp的getjson 出现Resource interpreted as Script but transferred with MIME type text/plain:错误 怎么解决,希望大神们帮帮忙 解决方案 用 $.ajax 吧

工厂函数-$()方法的返回值一定是一个jquery对象吗?

问题描述 $()方法的返回值一定是一个jquery对象吗? 请教大虾,"$()方法的返回值一定是一个jquery对象",这句话是对的还是错的呢?请说明原因,谢谢 解决方案 其实$()可以包含两个参数,$(selectorcontext) selector:用来查找的字符串context:指定查找的位置,context不写默认情况下是在当前的 HTML document中查找 DOM 元素,无论如何$()返回的一定是个DOM对象. 解决方案二: 如果引了JQuery可以认为是,如果没有引

jQuery中extend()和fn.extend()方法详解

  jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下:    代码如下: <!doctype html> <html> <head>

jQuery中extend()和fn.extend()方法详解_jquery

这两个方法用的是相同的代码一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例对于基本用法举几个例子 html代码如下 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>    <

ajax+jQuery实现级联显示地址的方法

  本文实例讲述了ajax+jQuery实现级联显示地址的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

jQuery对象入门级介绍

本文由 伯乐在线 - kmokidd 翻译.未经许可,禁止转载!英文出处:smashingmagazine.欢迎加入翻译组. 你是否曾经见过像  $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑,那请一定要读完这篇文章.如果你觉得上述的代码片段是不能正常工作的,那请先看一些jQuery的代码范例,你会发现链接中的代码都是这样的结构. 这篇文章将会分析下面代码片段(动画化一个方

ajax+jQuery实现级联显示地址的方法_jquery

本文实例讲述了ajax+jQuery实现级联显示地址的方法.分享给大家供大家参考.具体实现方法如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8" %> <html> <head> <title>初始化HELLO&l

jQuery 核心函数以及jQuery对象_jquery

一.jQuery 核心函数 首先介绍 jQuery 的几个核心函数,在 jQuery 中它们起着至关重要的作用,在实际的前端开发过程中用到最多的也是它们. 1.jQuery(elements) 将一个或多个DOM元素转化为jQuery对象. 这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数. 返回值:jQuery 对象 参数 elements: 用于封装成 jQuery 对象的 DOM 元素 复制代码 代码如下: // 将当前页面的背景色设为黑色 jQuer