1、jQuery对象.each(callback)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>遍历</title> <script src="js/jquery.js"> </script> <script type="text/javascript"> $(function(){ var wifes =$("#wife li"); wifes.each(function(index,obj){ //index:就是元素在集合中的索引 //obj：就是集合中的每一个元素对象 //this：集合中的每一个元素对象 alert(index+":"+$(obj).html()); }); }); </script> </head> <body> <ul id="wife"> <li>加藤惠</li> <li>斋藤飞鸟</li> <li>西野七濑</li> <li>石原里美</li> <li>亚丝娜</li> </ul> </body> </html>
2、$.each(obj,callback)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>遍历</title> <script src="js/jquery.js"> </script> <script type="text/javascript"> $(function(){ var wifes =$("#wife li"); // //this：集合中的每一个元素对象 $.each(wifes,function(index){ alert(index+":"+$(this).html()); }); }); </script> </head> <body> <ul id="wife"> <li>加藤惠</li> <li>斋藤飞鸟</li> <li>西野七濑</li> <li>石原里美</li> <li>亚丝娜</li> </ul> </body> </html>
3、for ...of
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>遍历</title> <script src="js/jquery.js"> </script> <script type="text/javascript"> $(function(){ var wifes =$("#wife li"); for (wife of wifes) { alert($(wife).html()); } }); </script> </head> <body> <ul id="wife"> <li>加藤惠</li> <li>斋藤飞鸟</li> <li>西野七濑</li> <li>石原里美</li> <li>亚丝娜</li> </ul> </body> </html>