JQuery selector project instance analysis and implementation code

The jQuery selector is really powerful!
Easyui encountered such a problem in the project
 
The current page displays the "original message query" Page. At that time, the left-side navigation bar selected "resend message query ". How to associate the menu on the right with the navigation on the left: click "original message query" on the left side, then the "re-send arrival message" on the right side is expanded, and the "original message query" is selected ", is "background management" disabled?
The implementation method is as follows::
1. The "raw message query" on the right uses the tabs control of easyui. Check the api and check that tabs has an onSelect method, you only need to write what you want to do in the onSelect method.
2. The trigger event is found. How can we achieve the desired effect?

The code result in the left-side navigation pane is as follows: the outermost layer is the easyui accordion control, and there are many pannel In accordion. A pannel corresponds to a parent directory and its sub-directories in Figure 1, for example, the "replenishment shipment Arrival report" module. The panel has two divs,
The first div is the parent directory, and the second div contains many subdirectories.
When tabs is selected on the right, the navigation bar on the left is selected. First, select all subdirectories and then select the current subdirectory.
Copy codeThe Code is as follows:
$ ('# Idaccordion li div'). removeClass ("selected ");
$ ('# Idaccordion span: contains ("' + title + '")'). parent (). parent (). addClass ("selected ");

3. The problem is that the selected menu is selected, but the parent menu of the selected sub-menu is not expanded. Panel in easyui has an expand method, but how do you know which panel (parent menu) should be expanded? As shown in Figure 2: the "original message query" option is selected all the time. Now let the parent menu of the "resend Arrival report" be displayed. The first child node of the brother node of the ancestor node of the element span in the "raw message query" is the node where the "resend Arrival report" is located.
Copy codeThe Code is as follows:
If ($ ('# idaccordion span: contains ("' + title + '")'). length> 0 ){
Var accordionTitle = $ ('# idaccordion span: contains ("' + title + '")'). closest ('. panel-body '). prev (). find ('. panel-title '). text ();
Var p = $ ('# idaccordion'). accordion ('getpanel ', accordionTitle );
P. panel ('expand ');
}

First, search for the span (<span class = "icon-users"> raw message query </span>) containing the title in the child node with the id of idaccordion ), find the ancestor node whose closest class is panel-body, find the previous sibling node (namely, <div class = "panel-header accordion-header-selected" style = "height: 15px; width: 161px; ">), locate the child node whose class is panel-title, and obtain the text of this node, that is," re-release Arrival report ".
The overall code is as follows::
Copy codeThe Code is as follows:
// When a tab is selected on the right, the corresponding menu on the left is also selected, and the accordion where the menu is located is expanded. Other accordion is disabled.
$ ('# Tabs'). tabs ({
OnSelect: function (title ){
$ ('# Idaccordion li div'). removeClass ("selected ");
$ ('# Idaccordion span: contains ("' + title + '")'). parent (). parent (). addClass ("selected ");
If ($ ('# idaccordion span: contains ("' + title + '")'). length> 0 ){
Var accordionTitle = $ ('# idaccordion span: contains ("' + title + '")'). closest ('. panel-body '). prev (). find ('. panel-title '). text ();
Var p = $ ('# idaccordion'). accordion ('getpanel ', accordionTitle );
P. panel ('expand ');
}
}
});

Usually, the closest method is rarely used. This method can obtain the parent element closest to an element, and a similar method is parents,The differences between the two are as follows::
Parents ([expr])
Obtains a set of elements (excluding the root element) that contain all the ancestor elements matching the elements ). You can use an optional expression to filter data.
The Code is as follows:
Copy codeThe Code is as follows:
$ ('# Items'). parents ('. parent1 ');
Closest ([expr])

Closest first checks whether the current element matches. If yes, it returns the element itself. If there is no match, the parent element is searched up, and the parent element is located up one layer until the element matching the selector is found. If nothing is found, an empty jQuery object is returned.
Copy codeThe Code is as follows:
$ ('# Items1'). closest ('. parent1 ');

The main differences between closest and parents are: 1. The former matches the current element, and the latter searches for the parent element. 2. The former searches for the parent element step by step, it stops until matching elements are found. The latter keeps searching up until the root element is found. Then, these elements are put into a temporary set and filtered by the given selector expression. 3, the former returns 0 or 1 element, and the latter may contain 0, 1, or multiple elements.
Closest is very useful for handling event delegation.