This article will introduce in detail the differences between children () and find () in jquery. For more information, see.
Children ()It is a filter, as its name implies, that is, to filter children that meet the criteria.
The complete format is as follows:
. Children (expr)
Children is the name of the filter, expr is the expression, and all the expressions in the selector can be used here, for example, by Tag Name "div", by class name ". class ", by serial number": first ", etc. If the expression is null, all children are returned, and the returned results are still jQuery objects.
Use the eq function for jquery to retrieve indexes.
The eq () selector selects an element with the specified index value.
The index value starts from 0, and the index value of all the first element is 0 (not 1 ).
It is often used with other elements/selectors to select the element with a specific sequence number in the specified group.
Example:
| The Code is as follows: | Copy code |
Certificate ('{test'}.children().eq(1).css ({'display': 'inline-Block '}); |
|
Set the second child element style of the element whose id is test to 'display': 'inline-Block '.
Another method
| The Code is as follows: | Copy code |
$ (": Eq (index)") for example: $ ("p: eq (1 )") |
|
For example:
| The Code is as follows: | Copy code |
<Body> <Script type = "text/javascript" language = "javascript"> |
|
Find ()Search for the descendant span element in all paragraphs and set its color to Red:
| The Code is as follows: | Copy code |
$ ("P"). find ("span" ).css ('color', 'red '); |
|
Definition and usage
The find () method gets the descendant of each element in the current element set, and filters by selector, jQuery object, or element.
Syntax
. Find (selector)
The first obvious feature of the find () method is that the selector expression accepted by the method is of the same type as the expression passed to the $ () function. The elements are filtered by testing whether these elements match the expression.
Consider the following simple nested list:
| The Code is as follows: | Copy code |
| <Ul class = "level-1"> <Li class = "item-I"> I </li> <Li class = "item-ii"> II <Ul class = "level-2"> <Li class = "item-a"> A </li> <Li class = "item-B"> B <Ul class = "level-3"> <Li class = "item-1"> 1 </li> <Li class = "item-2"> 2 </li> <Li class = "item-3"> 3 </li> </Ul> </Li> <Li class = "item-c"> C </li> </Ul> </Li> <Li class = "item-iii"> III </li> </Ul> |
|
We will start from List II to find the list items:
Certificate ('li.item-ii'0000.find('li'0000.css ('background-color', 'red ');
The above explanations can be summarized as follows:
1: both the children and find methods are used to obtain the sub-elements of the element. Neither of them returns the text node, just like most jQuery methods.
2: The children method obtains only child elements at the level of elements, namely, immediate children.
3: the find method obtains all lower-level elements, namely, descendants of these elements in the DOM tree.
4: The selector parameter of the children method is optional (optionally) and used to filter sub-elements. However, the selector method of the find method is required.
5: the find method can actually be implemented by using jQuery (selector, context): in English, the Selector context is implemented with. find () method; therefore, $ ('Li. item-II '). find ('lil') is equivalent to $ ('lil', 'Li. item-II ').
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
