一個例子看清楚JQuery子元素選擇器children()和find()的區別
阿新 • • 發佈：2018-12-25
最近在我們的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);
}<!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>
$(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);
});