jQuery中使用$.each()遍历array数据，map集合等操作

1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:???传入数组

<scriptsrc=”http://code.jquery.com/jquery-latest.js”>《script》


《script》 17jquery.com

$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});

《script》

//输出

0: 52
1: 97

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:???如果一个映射作为集合使用,回调函数每次传入一个键-值对

<scriptsrc=”http://code.jquery.com/jquery-latest.js”>《script》


《script》

var map = {
‘flammable’: ‘inflammable’,
‘duh’: ‘no duh’
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});

《script》

//输出

flammable: inflammable
duh: no duh

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++内容来自17jquery

//例子:???回调函数中 return false时可以退出$.each(), 如果返回一个非false即会像在for循环中使用continue 一样, 会立即进入下一个遍历

 

  <scriptsrc=”http://code.jquery.com/jquery-latest.js”>《script》

 

 

 

 

 

《script》

    var arr = [ "one", "two", "three", "four","five" ];//数组

    var obj = { one:1, two:2, three:3, four:4,five:5 }; // 对象 17jquery.com

    jQuery.each(arr, function() {  // this指定值

      $(“#” + this).text(“Mine is ” +this + “.”);  // this指向为数组的值, 如one, two

       return (this != “three”);// 如果this = three 则退出遍历

   });

    jQuery.each(obj, function(i, val) {  //i 指向键, val指定值

      $(“#” +i).append(document.createTextNode(” C ” + val));

    });

《script》

// 输出

Mine is one. C 1

Mine is two. C 2

Mine is three. C 3

- 4

- 5

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:???遍历数组的项, 传入index和value

一起jquery,17jquery

$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});

《script》

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:???遍历对象的属性,传入 key和value

<scriptsrc=”http://code.jquery.com/jquery-latest.js”>《script》


《script》

$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});

《script》

正自评论的例子:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

17jquery.com

1. 如果不想输出第一项 (使用retrun true)进入 下一遍历

<scriptsrc=”http://code.jquery.com/jquery-latest.js”>《script》


《script》

var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue’ with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});

《script》

2.一个级联下拉框的例子

$(function(){
   function objInit(obj) {//下拉列表框初始化
              return $(obj).html("请选择");
          }
          var arrData = { //定义一个数组保存相关数据
              厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
              厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
              厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
          };
          $.each(arrData, function(pF) { //遍历数据增加厂商项
              $("#selF").append("" + pF + "");
         });
          $("#selF").change(function() { //厂商列表框选项改变事件
              objInit("#selT");
             objInit("#selC");
              $.each(arrData, function(pF, pS) {
                  if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配
                      $.each(pS, function(pT, pC) { //遍历数据增加品牌项
                          $("#selT").append("" + pT + "");
                      });
                      $("#selT").change(function() { //品牌列表框选项改变事件
                          objInit("#selC");
                          $.each(pS, function(pT, pC) {
                              if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配
                                  $.each(pC.split(","), function() { //遍历数据增加型号项
                                      $("#selC").append("" + this + "");
                                  });
                              }
                          });
                      });
                  }
              });
          });
          $("#Button1").click(function() { //注册按钮单击事件
             var strValue = "您选择的厂商:";
              strValue += $("#selF option:selected").text();
              strValue += " 您选择的品牌:";
              strValue += $("#selT option:selected").text();
              strValue += " 您选择的型号:";
              strValue += $("#selC option:selected").text();
              $("#divTip")
              .show()
              .addClass("clsTip")
              .html(strValue); //显示提示信息并增加样式
         });
        })