[jQuery] $.map, $.each, detach() , $.getJSOIN()
$.map function will return the modifies array.
$.each function will not new a new array, the old value will still be the same.
detach() funciton will remove the element from the DOM, you can append those element later, it works more eiffient.
getJSON
$('button').on('click', function() {
$.getJSON('/cities/deals', function(result){
$.each(result, function(index, dealItem) {
var dealElement = $('.deal-' + index);
dealElement.find('.name').html(dealItem.name);
dealElement.find('.price').html(dealItem.price);
});
});
});
Let's take a minute to make our previous code a bit more efficient. Use the .detach() method to remove the .flight-times list element from the DOM before you insert the new listitems. Then, re-insert the .flight-times element back into the .flights element.
$('.update-available-flights').on('click', function() {
$.getJSON('/flights/late', function(result) {
var flightElements = $.map(result, function(flightItem, index){
var flightEl = $('<li>'+flightItem.flightNumber+'-'+flightItem.time+'</li>');
return flightEl;
});
$('.flight-times').detach().html(flightElements).appendTo('.flights');
});
});
[jQuery] $.map, $.each, detach() , $.getJSOIN()的更多相关文章
- 冰冻三尺非一日之寒--jQuery
第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...
- map
说明 map()是python的内置函数. 定义:接收2个参数,第一个参数一般为方法:第二个参数为可迭代对象,此方法会自动迭代第二个参数,然后将获取的数据传入第一个参数. 案例操作 需求:将下面的数据 ...
- BeanUtils.populate(obj, map);
public static void populate(Object bean, Map<String, ? extends Object> properties) throws Ille ...
- 进击的Python【第十七章】:jQuery的基本应用
进击的Python[第十七章]:jQuery的基本应用
- spring4mvc返回json(bean,list,map)
因为spring3和spring4的mvc在前端返回json所需要的jar包不一样,所以索性写一篇关于spring4mvc在前端返回json的博文. 首先,新建一个web项目,项目格式如图所示: co ...
- 网页设计之jQuery
1.在html中引入css和jQuery <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- [Java] Java解析XML格式Response后组装成Map
//Get and Parse Response def response = context.expand(‘${TestStepName#Response}’) def xmlParser = n ...
- vue-cli webpack 引入jquery
首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...
- 【dom4j】解析xml为map
dom4j解析xml文件 <?xml version="1.0" encoding="utf-8"?> <workflows> < ...
随机推荐
- 快速排序之C++实现
快速排序之C++实现 一趟快速排序的算法是: 1)设置两个变量i.j,排序开始的时候:i=0,j=N-1: 2)以第一个数组元素作为关键数据,赋值给key,即key=A[0]: 3)从j开始向前搜索, ...
- Codeforces Round #350 (Div. 2) E. Correct Bracket Sequence Editor 栈 链表
E. Correct Bracket Sequence Editor 题目连接: http://www.codeforces.com/contest/670/problem/E Description ...
- Codeforces Round #298 (Div. 2) E. Berland Local Positioning System 构造
E. Berland Local Positioning System Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.c ...
- web开发中兼容性问题(IE8以上含)持续更新~~
在实际开发中总是遇到莫名其妙的问题~~~那么就记录下来这些问题,对这些问题进行一个总结. 1.事件对象 1)事件参数e,就是事件对象,标准的获取方式 2)e.eventPhase 事件阶段,IE8以前 ...
- vue父子组件使用时遇到的一个问题
子组件一定要写在父组件之前,例如: //子vue,这里遇到一个坑,那就是子vue一定要写在父vue前面,不然会报错. Vue.component('todo-item', { template: $( ...
- [html5]使用localStorage兼容低版本Safari无法使用indexeddb的情况
摘要 简单场景描述:将html5开发的app内嵌入ios app中,有部分数据,需要在本地存储,就想到使用浏览器的localstorage或者indexeddb,另外localstorage存储的方式 ...
- extjs 事件监听 三种方式
xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowB ...
- Javascript:猜猜弹出的是啥?为啥?
背景 经常需要向新入职的年轻同学解释Javascript的两个概念:单线程和作用域链,今天就再写篇博客说明一下. 单线程 队列:只有一个用来存储回调方法的队列. 消费线程:只有一个消费线程,不停的从队 ...
- Log4j输出格式控制
参数说明例子 %c 列出logger名字空间的全称,如果加上{<层数>}表示列出从最内层算起的指定层数的名字空间 log4j配置文件参数举例 输出显示媒介 假设当前logger名字空间是& ...
- Git 学习(五)远程仓库
Git 学习(五)远程仓库 之前的章节所说的是本地Git仓库的操作,版本管理的优越性显然不会仅仅在本地.远程仓库也就是服务器或是网络端的仓库操作也是必须的. 本文具体说明 Git 的远程仓库操作,示例 ...