jQuery Return Flight Ch4:Utility Methods

each

用each把result的物件讀出來,插入頁面元素之中。
要插入<p></p>之中使用的是html()
要插入img的src欄位,使用find('img').attr('src', city.image)
之前也有使用過attr()這個方法來找到data欄位。

1
2
3
4
5
6
7
8
success: function(result){
$.each(result, function(index, city) {
var favorite = $('.favorite-'+index);
favorite.find('p').html(city.name);
favorite.find('img')
.attr('src', city.image);
});
}
1
$.each(collection, function(<index>, <object>) {});

getJSON

用ajax設定dataType:'json'

1
2
3
4
5
6
7
('.update-status').on('click', function() {
$.ajax('/status', {
contentType: 'application/json',
dataType: 'json',
success: function(result) { ... }
});
});

等於使用getJSON

1
2
3
4
5
6
7
$('.update-status').on('click', function() {
$.getJSON('/status', function(result) {
name: 'JFK - New York, NY',
var statusElements = ???
$('.status-list').html(statusElements)
});
});

map

1
2
3
4
var myNumbers = [1,2,3,4];
var newNumbers = $.map(myNumbers, function(item, index){ return item + 1 });
//myNumbers => [1,2,3,4]
//newNumbers => [2,3,4,5]

使用map插入元素

1
2
3
4
5
6
$.map(result, function(status, i) {
var listItem = $('<li></li>');
$('<h3>' + status.name + '</h3>').appendTo(listItem);
$('<p>' + status.status + '</p>').appendTo(listItem);
return listItem;
});

完整版

1
2
3
4
5
6
7
8
9
10
11
$('.update-flight-status').on('click', function() {
$.getJSON('/status', function(result) {
var statusElements = $.map(result, function(status, i) {
var listItem = $('<li></li>');
$('<h3>'+status.name+'</h3>').appendTo(listItem);
$('<p>'+status.status+'</p>').appendTo(listItem);
return listItem;
});
$('.status-list').html(statusElements);
});
});

可以看出map需要另外指定一個陣列(statusElemets)來儲存所有的li。一次把一整包li,塞進ul中。
而each是一個一個塞進去。相似的部份用map是語意滿清楚的作法。

還有一個最大的不同是each回傳的陣列不會改變,而map回傳的陣列是經過處理的。請看下圖:

detach

1
2
3
4
5
6
7
8
9
10
11
12
$('.update-flight-status').on('click', function() {
$.getJSON('/status', function(result) {
var statusElements = $.map(result, function(status, index) {
var listItem = $('<li></li>');
$('<h3>'+status.name+'</h3>').appendTo(listItem);
$('<p>'+status.status+'</p>').appendTo(listItem);
return listItem;
});
$('.status-list').detach()
}); .html(statusElements)
.appendTo('.status');
});

這邊使用detach而不使用remove來刪除元素,因為detach其實不會把元素真正的刪除,而會保留下來。這樣做效率比較好。

detach與remvove的差別

評論