一个样例看清楚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，即结果是a。1，b，2，c。3

2.eq(0)选中的是第一个元素。所以改变的是a

$(selector).find("span:eq(0)").text(id);
的作用相当于
$(selector).each(function(){
    $(this).children("span:eq(0)").text(id);
});

1.对于selector选中的每个元素，都再用"span:eq(0)"筛选一次。即结果是a。b，c

更直观的样例，能够參考这篇文章“jQuery笔记-jQuery筛选器children()具体解释”。