jQuery$.each循环遍历详解，各种取值对比，$.each遍历数组、对象、Dom元素、二维数组、双层循坏、类json数据等等
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
| 函数 | 描述 |
|---|---|
| .add() | 将元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
| .children() | 获得匹配元素集合中每个元素的所有子元素。 |
| .closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。 |
| .contents() | 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。 |
| .each() | 对 jQuery 对象进行迭代，为每个匹配元素执行函数。 |
| .end() | 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。 |
| .eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
| .filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
| .find() | 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 |
| .first() | 将匹配元素集合缩减为集合中的第一个元素。 |
| .has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
| .is() | 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。 |
| .last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
| .map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。 |
| .next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
| .nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。 |
| .nextUntil() | 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。 |
| .not() | 从匹配元素集合中删除元素。 |
| .offsetParent() | 获得用于定位的第一个父元素。 |
| .parent() | 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 |
| .parents() | 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 |
| .parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。 |
| .prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 |
| .prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。 |
| .prevUntil() | 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。 |
| .siblings() | 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。 |
| .slice() | 将匹配元素集合缩减为指定范围的子集。 |
<head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ //设置默认选中项 $("select:eq(0)").val(2); //如果多选，将返回一个数组，其包含所选的值。 $.each($("select:eq(0)").val(),function(i,v){ //$("select:eq(0)").val()应返回一个数组 //遍历数组有5种方式 console.log(v); console.log(数组名[i]) //能用$(this)或者this的function()函数里就不用传值了 alert($(this)[0]);//不理解但能取出值 //=========this取值================ //$(this)[0] == this = v alert(this); alert(this[0]);//不理解但能取出值 }); //获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容,是字符串所以要split()转成数组 $.each($("select:eq(0) :selected").val().split(),function(i,v){ //同样5种方式 console.log(v); }); //例遍dom元素比如selcted选项 $.each($("select:eq(0) :selected"),function(i,v){//遍历选中的 //$.each($("select:eq(0) option"),function(i,v){//遍历全部元素 console.log(v);//遍历出<option value="2">香蕉</option>类似这种html元素 //注意取值 console.log(v.name); console.log(v.value); console.log(v.text); //=========this取值================= console.log(this)// 和上面取法类似，this相当于v console.log(this.name); console.log(this.value); console.log(this.text); //=======$(this)取值============ //$(this)[0] == this = v alert($(this).val()); alert($(this).text())======alert($(this).html()); }); //====================JQuery中使用each，如果需要退出 each 循环可使回调函数返回 return false;=========================== //第一个为对象的成员名称或数组的索引，第二个为对应变量值或内容 //例遍数组，同时使用元素索引和内容。（i是索引，n是内容） $.each([0,1,2], function(i, n){ //遍历数组有5种方式 alert( "Item #" + i + ": " + n );//取值有两种方式1、数组名[i] 2、n alert(数组名[i]); //=========$(this)取值================ alert($(this)[0]);//不理解但能取出值 //=========this取值================ alert(this); alert(this[0]);//不理解但能取出值 }); //例遍对象，同时使用成员名称和变量内容。（i是成员名称，n是变量内容） $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); }); //例遍dom元素，此处以一个input表单元素作为例子 /*如果你dom中有一段这样的代码 <input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/> */ $.each($("input:hidden"), function(i,val){ alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。 alert(i); //输出索引为0，1，2，3 //注意底下取值 alert(val.name); //输出name的值 alert(val.value); //输出value的值 //=========this取值================= console.log(this)// 和上面取法类似，this相当于val console.log(this.name); console.log(this.value); console.log(this.text); //=========$(this)取值============ //$(this)[0] == this = v alert($(this).val()); alert($(this).text())======alert($(this).html()); }); //================================================================== //事实证明双层循坏this,$(this)不管用，只能用function()里的函数value //循坏二维数组 $.each([[1, 4, 3], [4, 6, 6], [7, 20, 9]] , function(i, item){ $.each(item,function(k,v){//item相当于取每一个一维数组， console.log(v); }); }); //循坏多个对象【常用在json串中】 $.each( [{ name: "a", lang: "b" },{ name: "John", lang: "JS" }], function(i, n){ $.each(n,function(k,v){ alert( "Name: " + k + ", Value: " + v ); }); }); each和map的比较 /*下面的例子是获取每一个多框的ID值； each方法： 定义一个空数组，通过each方法，往数组添加ID值；最后将数组转换成字符串后，alert这个值； $(function(){ var arr = []; $(":checkbox").each(function(index){ arr.push(this.id); }); var str = arr.join(","); alert(str); }) map方法: 将每个:checkbox执行return this.id；并将这些返回值，自动的保存为jQuery对象，然后用get方法将其转换成原生Javascript数组，再使用join方法转换成字符串，最后alert这个值； $(function(){ var str = $(":checkbox").map(function() { return this.id; }).get().join(); alert(str); }) 当有需一个数组的值的时候，用map方法，很方便。*/ }); </script> </head> <table> <tr> <td> <!--multiple设定下拉框可以多选，size设定下拉框不呈现下拉方式，--> <select size="12" id="One" multiple="multiple"> <option value='1'>苹果</option> <option value="2">香蕉</option> <option value="3">草莓</option> <option value="4">橘子</option> </select> </td> <td> <input type="button" value=">>>"><br> <input type="button" value=" > "><br> <input type="button" value=" < "><br> <input type="button" value="<<<"><br> </td> <td> <select size="12" id="two" multiple="multiple"> <option value="5">葡萄</option> </select> </td> <td> <input type="button" value=" up "><br><br> <input type="button" value="down"><br> </td> </tr> </table>
