One example to see the difference between the jquery sub-element selector children () and the Find ()

Recently, a problem has been identified in the development of our Hybrid app project to understand the difference between the jquery selector find () and children (). The problem is this: Our hybrid app is a single page app (main.html), and the logical page is rendered by the project customization. mspl file (which is actually an HTML file). For example, A.MSPL, B.MSPL, C.MSPL loading, will be inserted into the main.html, but only 1 MSPL files at a time, when the B.MSPL display, A.MSPL and C.MSPL will be hidden. On the 3 pages A, B, C, the current mobile network is available. When the user opens or shuts down the cellular network, it calls the WebView method through the Android broadcast, refreshes the network status displayed on the 3 pages of A, B, C.

The main.html structure is as follows:

<! DOCTYPE html>
When the network status changes, Android will call the following JS method through WebView, refresh the page display network status:
Online offlinefunction refreshnetworkstatus (status) {//select each MSPL under the network status display bar var selector = $ ("div[spl-id= ' Net_status ') ");//the network status display bar has 2 spans, the first of which is the $ (selector) that is used to display the network status. Children (" Span:eq (0) "). Text (Offlinetip);
The problem is: When we turn on or off the network connection, A.MSPL can display the network status correctly, but the network status display bar in B.MSPL and C.MSPL cannot be refreshed. The project simulation code is as follows:
<! DOCTYPE html>can see we click Online or Offline button, only A.MSPL under the network status display bar can be normal. If you do not use children (), you can use Find () to meet the requirements. When you click the online or Offline button, the network status of the 3 pages is displayed as normal. 
$ (selector). Find ("Span:eq (0)"). Text (text);

The difference between children () and find () is that:
The 1.children method obtains only the child elements of a subordinate element, namely: immediate children
The 2.find method obtains all subordinate elements, namely: all descendants
The parameter selector of the 3.children method is optional and is used to filter the child elements, but the parameter selector method of the Find method is required.

$ (selector). Children ("Span:eq (0)") functions equivalent to $ (selector). Children (). EQ (0)
1. Obtain all direct spans under selector, that is, the result is <span>a</span>,<span>1</span><span>b</span ,<span>2</span>,<span>c</span>,<span>3</span >
2.eq (0) The first element is selected, so the change is <span>a</span>

$ (selector). Find ("Span:eq (0)"). Text (id); The function is equivalent to $ (selector). each (function () {    $ (this). Children ("Span:eq (0)") . text (id);});
1. For each element selected by selector, use "Span:eq (0)" To filter once, that is, the result is <span>a</span>,<span>b</span>,< Span>c</span>

For more intuitive examples, you can refer to this article "jquery Note-jquery filter children ()."
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
One example to see the difference between the jquery sub-element selector children () and the Find ()