`
Anybing
  • 浏览: 127212 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery遍历对象/数组/集合

阅读更多
转载自: 网络
  
1.jquery 遍历对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script  type="text/javascript">
     $(function(){

       var tbody = "";    
    //------------遍历对象 .each的使用-------------
      //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)
    var obj =[{"name":"项海军","password":"123456"}];
   $("#result").html("------------遍历对象 .each的使用-------------");
      alert(obj);//是个object元素
   //下面使用each进行遍历
   $.each(obj,function(n,value) { 
           alert(n+' '+value);
           var trs = "";
             trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";
             tbody += trs;       
           });

         $("#project").append(tbody);
     
  });
  </script>
 </HEAD>
 
 <BODY>
     <div id="result" style="font-size:16px;color:red;"></div>
    <table cellpadding=5 cellspacing=1 width=620 id="project" border="1" >
            <tr>
                <th>用户名</th>
                <th>密码</th>              
            </tr>             
     </table>
 </BODY>
</HTML>


2.jQuery遍历数组

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script  type="text/javascript">
     $(function(){

       var tbody = "";
    
     //------------遍历数组 .each的使用-------------
           var anArray = ['one','two','three'];
     $("#result").html("------------遍历数组 .each的使用-------------");
           $.each(anArray,function(n,value) {
           
            alert(n+' '+value);
           var trs = "";
             trs += "<tr><td>" +value+"</td></tr>";
              tbody += trs;
            });

          $("#project").append(tbody);
     
  });
  </script>
 </HEAD>
 
 <BODY>
    ------------此部分同1中的body部分--------------------

 </BODY>
</HTML>


3.jQuery 遍历List集合(其实与遍历一个对象没有太大区别,只是格式上的问题)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
  <script  type="text/javascript">
     $(function(){

       var tbody = "";
    
     //------------遍历List集合 .each的使用-------------
      var obj =[{"name":"项海军","password":"123456"},{"name":"科比","password":"333333"}];
    $("#result").html("遍历List集合 .each的使用");
      alert(obj);//是个object元素
   //下面使用each进行遍历
   $.each(obj,function(n,value) { 
           alert(n+' '+value);
       var trs = "";
             trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";
             tbody += trs;       
           });
         $("#project").append(tbody);
     
  });
  </script>
 </HEAD>
 
 <BODY>
       ------------此部分同1中的body部分--------------------

 </BODY>
</HTML>
分享到:
评论
2 楼 lijunwyf 2014-04-08  
但是三种方式没有太大区别
1 楼 lijunwyf 2014-04-08  
很不错,实用

相关推荐

    jQuery遍历对象、数组、集合实例

    在遍历数组时,`$.each()`方法的使用与遍历对象类似,但它会遍历数组的每一个元素。数组是一个有序集合,每个元素都有一个索引位置,`$.each()`方法会返回元素的索引和值。与对象遍历不同的是,遍历数组通常不涉及...

    jQuery $.each遍历对象、数组用法实例

    - **简单输出**:可以使用$.each轻松地遍历数组或对象并输出每个元素或属性,如示例所示,弹出消息框显示元素或属性值。 - **条件判断**:在回调函数中,可以基于当前元素或属性执行条件判断,决定是否执行特定...

    jquery 遍历数组 each 方法详解

    jQuery中的$.each()方法主要用于遍历数组或对象。它提供了一种方便的方式来执行数组中的每个元素或对象的每个属性。$.each()方法是jQuery的核心扩展之一,可以用来替代原生JavaScript中的for循环来处理数组或对象。 ...

    jquery 遍历 学习

    这个“jQuery遍历学习”的主题主要关注如何使用jQuery来高效地遍历DOM元素,以实现对网页内容的控制和操作。 首先,jQuery提供了多种遍历方法,包括基本的选择器和遍历函数。选择器如`$()`用于选取DOM元素,可以...

    JQuery $.each遍历JavaScript数组对象实例

    在JavaScript和jQuery中,`$.each`函数是一个非常实用的工具,用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中,我们将深入探讨如何使用`$.each`处理JSON数据,特别是从JSON字符串...

    浅析jQuery 遍历函数,javascript中的each遍历_.docx

    在 JavaScript 中,each 方法是 jQuery 库中的一个核心方法,用于遍历数组或对象。其基本语法为:`$.each(collection, callback)` 其中,`collection` 是要遍历的数组或对象,`callback` 是一个函数,每次遍历时...

    jquery遍历json对象集合详解

    接下来,我们将根据给定的文件信息,详细讲解如何使用jQuery遍历JSON对象集合。 首先,了解JSON对象的基本结构是非常重要的。一个JSON对象可以是一个简单的键值对集合,也可以是嵌套的复杂结构,其中键是字符串,值...

    JQuery遍历的知识

    2. **遍历数组** 对于数组,`$.each()`会按索引顺序访问每个元素。回调函数的两个参数通常是索引`i`和当前元素`value`。同样,`this`会指向当前元素。例如: ```javascript var arr = ["one", "two", "three", ...

    js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

    `for...in`循环并不适合遍历数组,因为它会遍历数组的可枚举属性,包括原型链上的属性。推荐使用`for`循环或`Array.prototype.forEach()`方法来遍历数组的索引和元素。 例如,要获取数组的所有元素,可以直接使用`...

    详解Jquery 遍历数组之$().each方法与$.each()方法介绍

    接下来是`$.each()` 方法,它更通用,既可以遍历数组,也可以遍历对象(包括JSON对象)。让我们逐个看这些情况: 1. **遍历一维数组**: ```javascript $.each(["aaa","bbb","ccc"],function(index,value){ ...

    jQuery 遍历map()方法详解

    map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。 二、语法 .map(callback(index,domElement)) 三、详细说明 由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以...

    Jquery遍历Json数据的方法

    - 遍历数组时,确保正确处理索引和值。 - 动态内容显示在`&lt;body&gt;`中,而不是`&lt;head&gt;`或`&lt;script&gt;`标签内。 - 遵循最佳实践,如使用`.append()`而非`.innerHTML`,以避免潜在的安全问题。 通过上述讲解,我们了解了...

    JavaScript jQuery 中定义数组与操作及jquery数组操作

    JavaScript 和 jQuery 中的数组操作是编程中非常基础且重要的部分,尤其在处理数据集合时。在 JavaScript 中,数组是一种特殊的数据结构,可以存储各种类型的数据,包括整型、字符串、对象等。虽然 JavaScript 不...

    Jquery遍历json的两种数据结构.pdf

    在jQuery中,遍历JSON对象或数组通常会用到`$.each()`函数。例如,遍历上述JSON数组可以这样做: ```javascript var arr = [ {name: "john", lang: "js"}, {name: "nailwl", lang: "jquery"}, {name: "吴磊 ", ...

    jQuery 遍历函数详解

    下面我们详细讲解这些jQuery遍历函数的知识点。 .add()函数用于将元素添加到jQuery对象集合中。这个函数可以将新元素直接添加到现有的jQuery对象集合中,实现链式操作。 .andSelf()函数将之前操作返回的元素集添加...

    jquery操作对象数组元素方法详解

    3. `each()`方法可以用于遍历jQuery对象数组,同时提供了灵活的方式来处理每个元素。 4. 如果需要,可以使用`get()`方法将jQuery对象数组转换为DOM对象数组,进而可以使用方括号[]来访问数组元素。 正确理解和运用...

    jQuery 遍历的 each() 方法

    `each()`方法是jQuery中的一个核心功能,用于遍历集合中的每一个元素,这在处理DOM节点数组或者对象数组时非常实用。下面我们将深入探讨`each()`方法的用法、原理以及它在实际开发中的应用。 ### `each()`方法概述 ...

    jquery中push()的用法(数组添加元素)

    在处理DOM和JavaScript编程中,数组是一种常见的数据结构,用于存储和操作有序的数据集合。本文主要介绍jQuery中如何使用push()方法来向数组末尾添加元素,并返回新的数组长度。 首先,push()方法是JavaScript的...

Global site tag (gtag.js) - Google Analytics