最近在我们的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()详解”。
版权声明：本文为博主原创文章，未经博主允许不得转载。