When using JQuery, if you want to find a container (such as div or some sub-elements in table), you can easily use the find method. When using JQuery, if you want to find a container (such as p or some sub-elements in table), you can easily use the find method. Find will search for all sub-elements that meet the conditions in an iterative way, and can set css and other content in a unified and batch.
For example, there is a table:
The Code is as follows:
Embedded Table, row 1 column 1
|
Embedded Table, row 1 column 2
|
Embedded Table, row 2 column 1
|
Embedded Table, row 2 column 2
|
|
The first Table, row 2 column 1
|
The first Table, row 2 column 2
|
Now we need to set all fonts to blue. just do this.
$ ("Table" ).css ("color", "blue ");
Note: $ ("table") indicates that "every table" is set in this way on the page.
The following is a complex example --
[Set the font of the second row and second column of each table to Red]
Maybe you may think for this -- because $ ("table") represents "every table", if you write "$ (table tr: eq (1) td: eq(1)).css ("color", "red"); you can achieve this (the second row and second column of each table )......
Is that true? If you run the result, you will be surprised-because only "embedded Table, column 1 in the row" becomes red! This is not the expected result at all.
Why? The principle is simple-because if JQuery splits html tags or other related attributes by spaces, it means to find self-tags one by one from the "parent tag" until the conditions are met. The result is "Find all tr in the parent table, find the second tr that meets the condition, then find the first td in the second tr, and dye it in red !"
The complete definition is given below --
$ ("HTML Tag, html sub-Tag: eq (n )......) : Search for the nth + 1 sub-tag that meets the conditions from the HTML Tag (parent), and then find the nth + 1 sub-tag in the nth + 1 sub-tag ...... Until all data is traversed.
Therefore, this method is wrong, which is especially easy for beginners.
So what should we do? Someone thought of this method --
The Code is as follows:
$ ("Table"). each (function (){
$ (This). find ("tr: eq (1) td: eq (1)" ).css ("color", "red ");
});
The reason is: traverse each table and set the color of the second column in the second row of each table.
The second person seems a little smarter than the first answer, he realized that the "table" parent tag won't be searched repeatedly (JQuery only needs to traverse the innermost tag in depth when setting the tag, that is, the blue defined "..." The Infinity part ). Therefore, we thought of using each -- It is true that each does solve the problem of in-depth table traversal, but the find of the first table is still executed according to the blue part of the idea (still looking for the second tr in the parent table, the second td in the second tr), so find is only the end HTML for deep traversal.
In this case, we can only use the following method:
$ ("Tr: nth-child (2) td: nth-child (2)" ).css ("color", "red ");
Nth-child (n) is a CSS pseudo-class method that can be used in JQuery. The code indicates: Find the container element closest to the nth tr, then configure yourself.
In this way, "tr: nth-child (2)" will correspond to two
