See the difference between the jquery sub-element selector children () and the Find () example

A problem has recently been identified in the development of our hybrid app project. Learn the difference between the jquery selector find () and the Children () by this question. The problem is this: Our hybrid app is a single-page application (main.html), and the logical page is rendered by the. mspl file (which is actually an HTML file) defined by the project itself.

For example, A.MSPL, B.MSPL, and C.MSPL are loaded into the main.html. However, only 1 MSPL files are displayed at a time, and when B.MSPL is displayed, A.MSPL and C.MSPL are hidden. On the 3 pages A, B, C, the current mobile network is available.

When the user opens or shuts down the cellular network. Will call the method inside WebView through the Android broadcast, refresh the network status displayed on the 3 pages of A, B, C.

Main.html structures such as the following:

<! 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 us click Online or Offline button. Only the A.MSPL under the network status display bar can be normal. Assuming that you are not using 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 a sub-element 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. Used to filter child elements, but the selector method of the Find method is required.

$ (selector). Children ("Span:eq (0)") functions equivalent to $ (selector). Children (). EQ (0)
1. Get all direct spans under selector, i.e. 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, filter again with "Span:eq (0)". That is, the result is <span>a</span>. <span>b</span>,<span>c</span>

A more intuitive example is the ability to refer to this article "jquery Note-jquery filter children () for specific explanations".
 
See the difference between the jquery sub-element selector children () and the Find () example