一个例子看清楚JQuery子元素选择器children()和find()的区别
来源:互联网 发布:淘宝司法拍卖房产技巧 编辑:程序博客网 时间:2024/04/30 14:01
最近在我们的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 offlinefunction 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中选择器children和find的区别
- jQuery中children()和find()的区别
- jquery中find()和children()的区别
- jquery的find和children区别
- 通过一个例子了解filter()和find()的用法/children()与find()区别
- jQuery-基本过滤选择器和子元素过滤选择器某些相似选择器的区别
- jQuery中focusin()和focus()、find()和children()的区别
- find() 和 children()的区别
- jquery中find方法和children方法的区别
- jquery中find方法和children方法的区别
- jquery find children 区别
- jQuery:find()及children()的区别
- jquery中find,children,contents的区别
- jquery中children()、find()的区别
- jquery中find与children的区别
- CSS后代选择器和子元素选择器的区别
- jQuery:find()与children()区别
- winform中numberricupdown属性和用法
- Excel Sheet Column Title
- function, method, unbound_method, bound_method
- 使用Lua CJSON库进行encode与decode操作
- fork函数--《深入理解操作系统》
- 一个例子看清楚JQuery子元素选择器children()和find()的区别
- Reverse Linked List
- LoadRunner的简单使用《第一篇》
- zigbee 原语与帧的关系是什么(个人理解)
- java 框架日志自定输出
- 创建表空间
- mysql忘记密码
- 万能适配器CommonAdapter和ViewHolder
- Caffe学习笔记1-安装以及代码结构