$.each 和$(selector).each()的區別

時間 2019-11-11

標籤 selector 區別简体版

原文原文鏈接

譯自官方手冊:jQuery.each()

對數組或對對象內容進行循環處理

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection 遍歷的對象或數組 javascript

callback(indexInArray, valueOfElement) 在每個對象上調用的函數 html

說明 java

一個通用的遍歷函數 , 能夠用來遍歷對象和數組. 數組和含有一個length屬性的僞數組對象 (僞數組對象如function的arguments對象)以數字索引進行遍歷,從0到length-1, 其它的對象經過的屬性進行遍歷. jquery

$.each()與$(selector).each()不一樣, 後者專用於jquery對象的遍歷, 前者可用於遍歷任何的集合(不管是數組或對象),若是是數組,回調函數每次傳入數組的索引和對應的值(值亦能夠經過this 關鍵字獲取,但javascript總會包裝this 值做爲一個對象—儘管是一個字符串或是一個數字),方法會返回被遍歷對象的第一參數 api

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 數組

//例子:———傳入數組 app

<!DOCTYPE html>
<html>
<head>
<script src=」http://code.jquery.com/jquery-latest.js」></script>
</head>
<body>
<script> 函數

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

</script>
</body>
</html> ui

//輸出

0: 52
1: 97

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

//例子:———若是一個映射做爲集合使用,回調函數每次傳入一個鍵-值對

<!DOCTYPE html>
<html>
<head>
<script src=」http://code.jquery.com/jquery-latest.js」></script>
</head>
<body>
<script>

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

</script>
</body>
</html>

//輸出

flammable: inflammable
duh: no duh

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

//例子:———回調函數中 return false時能夠退出$.each(), 若是返回一個非false 即會像在for循環中使用continue 同樣, 會當即進入下一個遍歷

<!DOCTYPE html>

<html>

<head>

<style>

div { color:blue; }

div#five { color:red; }

</style>

</head>

<body>

var arr = [ "one", "two", "three", "four", "five" ];//數組

var obj = { one:1, two:2, three:3, four:4, five:5 }; // 對象

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(」 – 」 + val));

});

</script>

</body>

</html>

// 輸出

Mine is one. – 1

Mine is two. – 2

Mine is three. – 3

- 4

- 5

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

//例子:———遍歷數組的項, 傳入index和value

<!DOCTYPE html>
<html>
<head>
<script src=」http://code.jquery.com/jquery-latest.js」></script>
</head>
<body>
<script>

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

</script>
</body>
</html>

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

//例子:———遍歷對象的屬性,傳入 key和value

<!DOCTYPE html>
<html>
<head>
<script src=」http://code.jquery.com/jquery-latest.js」></script>
</head>
<body>
<script>

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

</script>
</body>
</html>

正自評論的例子:

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

1. 若是不想輸出第一項 (使用retrun true)進入下一遍歷

<!DOCTYPE html>
<html>
<head>
<script src=」http://code.jquery.com/jquery-latest.js」></script>
</head>
<body>
<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> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。