一个样例看清楚JQuery子元素选择器children()和find()的差别
近期在我们的hybrid app项目开发中定位出了一个问题。通过这个问题了解下JQuery选择器find()和children()的差别。问题是这种:我们的混合app是一个单页面应用(main.html),逻辑上的页面是通过项目自己定义的.mspl文件(事实上就是html文件)来呈现的。
比方a.mspl、b.mspl、c.mspl载入的时候,都会插入到main.html中。可是每次仅仅显示1个mspl文件,当b.mspl显示的时候,a.mspl和c.mspl就会被隐藏。在a、b、c这3
个页面上都会显示当前手机网络是否可用。
当用户打开或者关闭手机网络的时候。会通过android广播调用webview里面的方法,刷新a、b、c这3个页面上显示的网络状态。
main.html结构例如以下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="jquery-1.11.1.min.js"></script>
- </head>
- <body>
- <div page="a.mspl">
- <div spl-id="net_status">
- <span>a</span>
- <span>1</span>
- </div>
- </div>
- <div page="b.mspl">
- <div spl-id="net_status">
- <span>b</span>
- <span>2</span>
- </div>
- </div>
- <div page="c.mspl">
- <div spl-id="net_status">
- <span>c</span>
- <span>3</span>
- </div>
- </div>
- </body>
- </html>
当网络状态发生变化的时候,android会通过webview调用以下的JS方法,刷新页面显示的网络状态:
- //online offline
- function refreshNetworkStatus(status)
- {
- // 选中每个mspl下网络状态显示栏
- var selector = $("div[spl-id='net_status']");
- // 网络状态显示栏以下有2个span,第一个是用来显示网络状态的
- $(selector).children("span:eq(0)").text(offlineTip);
- }
问题是:当我们打开或者关闭网络连接,a.mspl可以正确显示网络状态,可是b.mspl和c.mspl中的网络状态显示栏不能刷新。
项目模拟代码例如以下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="jquery-1.11.1.min.js"></script>
- <script>
- $(function(){
- $("button").click(function(){
- var selector = $("div[spl-id='net_status']");
- var text = $(this).text();
- //刷新网络状态显示
- $(selector).children("span:eq(0)").text(text);
- });
- });
- </script>
- </head>
- <body>
- <div page="a.mspl">
- <div spl-id="net_status">
- <span>a</span>
- <span>1</span>
- </div>
- <button>online</button>
- <button>offline</button>
- </div>
- <div page="b.mspl">
- <div spl-id="net_status">
- <span>b</span>
- <span>2</span>
- </div>
- <button>online</button>
- <button>offline</button>
- </div>
- <div page="c.mspl">
- <div spl-id="net_status">
- <span>c</span>
- <span>3</span>
- </div>
- <button>online</button>
- <button>offline</button>
- </div>
- </body>
- </html>
能够看到我们点击online或者offline按钮。仅仅有a.mspl下的网络状态显示栏能正常。假设不使用children(),而是使用find()就能够满足要求了。当点击online或者offline按钮时候,3个页面的网络状态显示都是正常的。
- $(selector).find("span:eq(0)").text(text);
children()和find()的区别在于:
1.children方法获得的不过元素一下级的子元素,即:immediate children
2.find方法获得全部下级元素,即:all descendants
3.children方法的參数selector是可选的。用来过滤子元素;但find方法的參数selector方法是必选的。
- $(selector).children("span:eq(0)")的作用相当于$(selector).children().eq(0)
1.获取selector下的全部直接span,即结果是<span>a</span>。<span>1</span>,<span>b</span>,<span>2</span>,<span>c</span>。<span>3</span>
2.eq(0)选中的是第一个元素。所以改变的是<span>a</span>
- $(selector).find("span:eq(0)").text(id);
- 的作用相当于
- $(selector).each(function(){
- $(this).children("span:eq(0)").text(id);
- });
1.对于selector选中的每个元素,都再用"span:eq(0)"筛选一次。即结果是<span>a</span>。<span>b</span>,<span>c</span>
更直观的样例,能够參考这篇文章“jQuery笔记-jQuery筛选器children()具体解释”。
一个样例看清楚JQuery子元素选择器children()和find()的差别的更多相关文章
- jquery子元素选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS选择器的组合选择器之后代选择器和子元素选择器
实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- H5 14-后代选择器和子元素选择器
14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- weex中css不能使用子元素选择器
weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
随机推荐
- 三维CNN:收集一些最近的3d卷积网络PointNet++
PointNet++是在PointNet上做出了改进,考虑了点云局部特征提取,从而更好地进行点云分类和分割. 先简要说一下PointNet: PointNet,其本质就是一种网络结构,按一定的规则输入 ...
- arx刷新图形界面
actrTransactionManager->flushGraphics(); acedUpdateDisplay();
- CAD使用GetXData读数据(com接口)
主要用到函数说明: MxDrawEntity::GetXData 返回实体的扩展数据. c#代码实现如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- Mybatis学习总结二
Mapper动态代理开发方式 实现原理: Mapper接口开发方法只需要程序员编写Mapper接口(相当于Dao接口),由Mybatis框架根据接口定义创建接口的动态代理对象. Mapper接口开发需 ...
- nginx_location用法总结
location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头,所以这条规则将匹配 ...
- 牛客多校Round 2
Solved:3 rank:187 H.travel 题意:给一颗带有点权的树 找三条不相交的链 使得点权最大 题解:使用树形DP dp[x][i][0/1] 表示x节点选择i条链 有没有经过x的链 ...
- nginx配置X-Forwarded-For 防止伪造ip
网上常见nginx配置ip请求头 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 风险: 用于可以通过自己设置请求头来伪造ip ...
- 信息的表示和处理 及 CS:APP 15213 datalab
信息的表示和处理 在通用计算机中中,字节作为最为最小 的可寻址的内存单元,而不是访问内存中单独的位. 寻址和字节顺序 big endian (大端法),数据最高字节部分地址在地址处,和人的感觉逻辑相似 ...
- ubuntu 安装codeblocks13.12
通过添加PPA的方法安装: sudo add-apt-repository ppa:pasgui/ppa sudo apt-get update sudo apt-get install codebl ...
- gnuplot examples
xy plot #set terminal jpeg #set output 'alfa.jpg' set terminal postscript eps font 24 set out 'U_vs_ ...