jquery遍历数组、集合、对象

最新推荐文章于 2022-03-17 14:32:06 发布
最新推荐文章于 2022-03-17 14:32:06 发布
阅读量659 收藏
点赞数
分类专栏： jquery笔记 文章标签： httpanybing.iteye.co
  1.     
  2. 1.jquery 遍历对象  
  3.   
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  5. <HTML>  
  6.  <HEAD>  
  7.   <TITLE> New Document </TITLE>  
  8.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  9.   <script  type="text/javascript">  
  10.      $(function(){  
  11.   
  12.        var tbody = "";      
  13.     //------------遍历对象 .each的使用-------------  
  14.       //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)  
  15.     var obj =[{"name":"项海军","password":"123456"}];  
  16.    $("#result").html("------------遍历对象 .each的使用-------------");  
  17.       alert(obj);//是个object元素  
  18.    //下面使用each进行遍历  
  19.    $.each(obj,function(n,value) {   
  20.            alert(n+' '+value);  
  21.            var trs = "";  
  22.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";  
  23.              tbody += trs;         
  24.            });  
  25.   
  26.          $("#project").append(tbody);  
  27.        
  28.   });  
  29.   </script>  
  30.  </HEAD>  
  31.    
  32.  <BODY>  
  33.      <div id="result" style="font-size:16px;color:red;"></div>  
  34.     <table cellpadding=5 cellspacing=1 width=620 id="project" border="1" >  
  35.             <tr>  
  36.                 <th>用户名</th>  
  37.                 <th>密码</th>                
  38.             </tr>               
  39.      </table>  
  40.  </BODY>  
  41. </HTML>  
  42.   
  43.   
  44. 2.jQuery遍历数组  
  45.   
  46. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  47. <HTML>  
  48.  <HEAD>  
  49.   <TITLE> New Document </TITLE>  
  50.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  51.   <script  type="text/javascript">  
  52.      $(function(){  
  53.   
  54.        var tbody = "";  
  55.       
  56.      //------------遍历数组 .each的使用-------------  
  57.            var anArray = ['one','two','three'];  
  58.      $("#result").html("------------遍历数组 .each的使用-------------");  
  59.            $.each(anArray,function(n,value) {  
  60.              
  61.             alert(n+' '+value);  
  62.            var trs = "";  
  63.              trs += "<tr><td>" +value+"</td></tr>";  
  64.               tbody += trs;  
  65.             });  
  66.   
  67.           $("#project").append(tbody);  
  68.        
  69.   });  
  70.   </script>  
  71.  </HEAD>  
  72.    
  73.  <BODY>  
  74.     ------------此部分同1中的body部分--------------------  
  75.   
  76.  </BODY>  
  77. </HTML>  
  78.   
  79.   
  80. 3.jQuery 遍历List集合（其实与遍历一个对象没有太大区别，只是格式上的问题）  
  81.   
  82. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  83. <HTML>  
  84.  <HEAD>  
  85.   <TITLE> New Document </TITLE>  
  86.   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  87.   <script  type="text/javascript">  
  88.      $(function(){  
  89.   
  90.        var tbody = "";  
  91.       
  92.      //------------遍历List集合 .each的使用-------------  
  93.       var obj =[{"name":"项海军","password":"123456"},{"name":"科比","password":"333333"}];  
  94.     $("#result").html("遍历List集合 .each的使用");  
  95.       alert(obj);//是个object元素  
  96.    //下面使用each进行遍历  
  97.    $.each(obj,function(n,value) {   
  98.            alert(n+' '+value);  
  99.        var trs = "";  
  100.              trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";  
  101.              tbody += trs;         
  102.            });  
  103.          $("#project").append(tbody);  
  104.        
  105.   });  
  106.   </script>  
  107.  </HEAD>  
  108.    
  109.  <BODY>  
  110.        ------------此部分同1中的body部分--------------------  
  111.   
  112.  </BODY>  

  1. </HTML>  
文章来源 http://anybing.iteye.com/blog/1167670

xinghuo0007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery遍历对象、数组、集合实例
10-25
主要介绍了jQuery遍历对象、数组、集合实例,本文直接给出实例代码,在代码中有详细注释来解释代码的作用,需要的朋友可以参考下
JQuery $.each遍历JavaScript数组对象实例
10-25
在JavaScript和jQuery中，`$.each`函数是一个非常实用的工具，用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中，我们将深入探讨如何使用`$.each`处理JSON数据，特别是从JSON字符串...
html自动识别循环列表元素,动态添加的元素,怎么遍历它们的功能及内容
weixin_30495469的博客
05-31 391
首先，id 在一个页面中只能出现一次，是唯一的，class才可以多次出现！声明id 为唯一属性，即一个 html 文件中只能出现一个对应的 id，class 可以使用多个；需求实现前端部分大到框架，小到功能，都是可以用设计模式来解决的，说白了，都是可以用 MVC 来解决的，如你的的例子：C -> 整个 JS 逻辑；V -> 单行条目；M -> 填充的数据；你其实可以把这种东西进行...
关于html数组的四中遍历方式 并且其中for in和for of的区别
Too_Soup_Soup的博客
03-17 1669
JQuery中的for.each循环。
jQuery实现的list列表
William.Yao的博客
11-08 5498
<div class="menu" id="menu"> <div> <p>Web前端</p> <ul style="display:block"> <li>JavaScript</li> <li>DIV+CSS</li> <li>jQuer
jQuery写一个简单的列表样式
q_2540638774的博客
10-23 479
一、今天又学了jQuery的各种知识，就写了一个关于列表的样式，效果如下图： 代码也比较简单，我们直接来看代码： 1、首先先写HTML代码，主要使用四个主菜单、若干个子菜单、以及div来写的，代码如下（注：这里主要是用ul、li和div标签的混用）： <ul class="zhu"> <div class="menu1"> <li> 菜单一 ...
html中table遍历list,css列表标签list与表格标签table详解
weixin_39957271的博客
06-11 1012
列表list，无序列表ul，有序列表ol1.列表项样式list-style-type无列表默认为dist实心圆，有序列表默认为decimal阿拉伯数字(前面不带0)其他无序列表常用none无样式，circle空心圆，square实心方块有序列表常用decimal-leading-zero以0开头的数字，lower-roman、upper-roman小写、大写罗马数字，lower-alpha、upp...
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
10-20
接下来是`$.each()` 方法，它更通用，既可以遍历数组，也可以遍历对象（包括JSON对象）。让我们逐个看这些情况： 1. **遍历一维数组**： ```javascript $.each(["aaa","bbb","ccc"],function(index,value){ ...
关于将java传过来的list动态遍历到html页面中
Hierarch的博客
03-26 1万+
Ajax Success之后 动态加载实现后端传的list数据&lt;!DOCTYPE html&gt;&lt;html &gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;script src="jquery.min.js"&gt;&lt;/script&gt;&lt;/head&gt;     
jquery ajax后台返回list,前台用jquery遍历list的实现
10-21
下面小编就为大家带来一篇jquery ajax后台返回list,前台用jquery遍历list的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Javascript 遍历对象中的子对象
10-29
昨天同事问我一个问题：“有一个JSON对象，其中有若干个子对象，如何遍历这个对象中的子对象？”
json在html中怎么遍历list,怎么对Json对象进行遍历呢？
weixin_39747577的博客
06-10 211
谢邀~首先, 既然你的class='list-group-item';则表示他们就是被遍历出来的. Ps: 不是遍历出来的就不叫list了.json:{name1: "1",name2: "2",name3: "3",name4: "4"}js:var objName = {name1: 名称1, name2: 名称2, name3: 名称3, name4: 名称4};var _html = ""...
Jquery 中 循环遍历 选择器 each（）
霍常国的博客
03-09 8342
$(document).ready(function(){ $("button").click(function(){ $("li").each(function ( index,element){ alert(index); alert(element); alert($(this).text()) }); }); }); 输出每个列表项的值 Coffee
js 操作List对象集合 常用小方法
热门推荐
rookieTa的博客
08-30 4万+
对List去重，根据对象某个属性去重 示例集合 const list = [ {id: 1, name: ‘aa’ , age: 15}, {id: 2, name: ‘bb’ , age: 16}, {id: 2, name: ‘cc’ , age: 17}, ]; 示例 调用方法 arrayUnique = (arr, name) => { const hash = {}; ret...
【HTML】HTML中的列表（list）
yy_bazinga的博客
03-03 8444
HTML中的列表（list）列表（list）有序列表无序列表定义列表嵌套使用使用情况 列表（list） 在html中可以创建列表，html列表一共有三种： 有序列表 无序列表 定义列表 有序列表 使用ol标签来创建有序列表 使用li表示列表项 <ol> <li>结构</li> <li>表现</li> <li>行为</li> </ol> 无序列表 使用ul标签来创建无序列表 使用li表示
JavaScript遍历对象-总结一
09-27 244
原生JavaScript 遍历 　　1、for 循环遍历 1 let array1 = ['a','b','c']; 2 3 for (let i = 0;i < array1.length;i++){ 4 console.log(array1[i]); // a b c 5 } 　　2、JavaScript 提供了 foreach() ma...
JQ中判断list是否含有元素
Jasen_Wang的博客
12-21 3229
我了个去，需求改了 原本以为多选的是时候调用后台判断数据库中的状态 谁知 不是啊！！！是页面上不满足的不允许修改 就是说要在前台判断 是否满足条件，否则不允许发送 改成这样 页面是 var list = new Array(); 然后，加载数据是 将满足条件的ID记录在list中 复选框时 判断，复选框的value在不在list中 这个有个问题 耽搁了很久 conta
jQuery遍历JSON数据结构解析
"Jquery遍历json的两种数据结构.pdf" jQuery是JavaScript的一个库，它极大地简化了DOM操作、事件处理以及Ajax交互。在涉及到与服务器进行数据交换时，JSON（JavaScript Object Notation）成为了jQuery常用的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值