261
jQuery內置函數map和each的用法
$.map的運用
var arr1 = [0, 3, 5];
var arr2 = $.map(arr1, function (item) { return item * 2 });
alert(arr2);
結果:0 6 10
$.each的運用
普通數組
var arr1 = [0, 3, 5];
$.each(arr1,function (i) {
alert(arr1[i]);
});
結果:0，3，5
json對象
var jsonData = {"tom": 20, "jerry": 21 };
$.each(jsonData,function (key, value) {
alert(key + "_" + value);
});
結果:tom_20, jerry_21
$.each(jsonData,function (i) {
alert(jsonData[i]);
});
結果:20,21
json對象數組($.getJSON裏麵常用)
var jsonArray = [ { "tom": 20, "jerry": 21 }, { "tom": 22,"jerry": 23} ];
$.each(jsonArray,function (i) {
alert(jsonArray[i].tom);
});
結果:20,22
看$.getJSON的一處應用：
$.getJSON(
"stu/stu_toshowStu",
{classNum:classNum},
function(json,status)
{
$.each(json,function(i){
$('#stuDiv').append("<div>學生學號:"+json[i].num+"</div>");
}
);
});
jQuery對象可以直接調用each:
$("input").each(function(){
$(this).val()........
});
each處理dom元素，此處以一個input表單元素作為例子。
<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,element){
alert(val);
alert(i);
alert(element.name);
alert(element.value);
});
alert(element)將輸出[object HTMLInputElement]，是一個表單元素
alert(i);將輸出為0，1，2，3
alert(element.name);將輸出aaa,bbb,ccc,ddd，若使用this.name將輸出同樣的結果
alert(element.value);將輸出111,222,333,444，若使用this.value將輸出同樣的結果
$("input:hidden").each(function(i,element){
alert(i);
alert(element.name);
alert(element.value);
});
輸出結果相同
當然比如$("input").css()等封裝好的操作自動有一個遍曆，就不需要手動遍曆了。
最後更新：2017-04-02 22:16:40