浙江省高等学校教师教育理论培训

微信搜索“毛凌志岗前心得”小程序

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery 遍历对象、数组、集合_项海军_新浪博客


  使用了jquery有段时间了,整理下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>

 

posted on 2012-04-27 09:18  lexus  阅读(771)  评论(0编辑  收藏  举报