近期在我们的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()的差别的更多相关文章

  1. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  3. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  4. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  5. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  6. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  7. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. Android基础夯实--重温动画（一）之Tween Animation

    心灵鸡汤:真正成功的人生,不在于成就的大小,而在于你是否努力地去实现自我,喊出自己的声音,走出属于自己的道路. 摘要 不积跬步,无以至千里:不积小流,无以成江海.学习任何东西我们都离不开扎实的基础知识 ...

  2. git删除本地分支失败，报错error: branch 'test219' not found.

    错误: 删除本地分支报错,操作如下: git branch -d test219 操作失败,错误信息:error: branch 'test219' not found git branch -D t ...

  3. Navicat Premium 12 破解方法

    基本安装下一步下一步,破解方法参考:地址

  4. TF实战：(Mask R-CNN原理介绍与代码实现)-Chapter-8

    二值掩膜输出依据种类预测分支(Faster R-CNN部分)预测结果:当前RoI的物体种类为i第i个二值掩膜输出就是该RoI的损失Lmask 对于预测的二值掩膜输出,我们对每个像素点应用sigmoid ...

  5. 十二届 - CSU 1803 ：2016（同余定理）

    题目地址:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1803 Knowledge Point: 同余定理:两个整数a.b,若它们除以整数m所 ...

  6. LOJ #6009 「网络流 24 题」软件补丁

    题面 某公司发现其研制的一个软件中有 $ n $ 个错误,随即为该软件发放了一批共 $ m $ 个补丁程序.每一个补丁程序都有其特定的适用环境,某个补丁只有在软件中包含某些错误而同时又不包含另一些错误 ...

  7. UVA - 208 Firetruck（并查集+dfs）

    题目: 给出一个结点d和一个无向图中所有的边,按字典序输出这个无向图中所有从1到d的路径. 思路: 1.看到紫书上的提示,如果不预先判断结点1是否能直接到达结点d,上来就直接dfs搜索的话会超时,于是 ...

  8. Python面向对象类的特殊成员方法

    类的特殊成员方法:1.__doc__ : 打印类下面的注释 2.__module__和__class__:from lib.aa import C输出类被导出的模块名lib.aa,输出类的模块名和类名 ...

  9. 挂载本地file到容器中

    -v /Us……/cts/fffen:/usr/local/src -v 标记 将本地主机的目录 到 目标容器的路径下 在容器中查看:ls  发现已经存在py文件 运行python fenci.py ...

  10. Java核心技术 卷一 复习笔记(乙

    1.字符串从概念上讲,Java字符串就是Unicode字符序列.Java没有内置的字符串类型,而是在标准Java类库中提供了一个预定义类,叫String. 每个用双引号括起来的字符串都是 String ...