Home > Article > Web Front-end > JQuery study notes The use of nt-child_jquery
JQuery study notes The use of nt-child_jquery
- WBOYOriginal
- 2016-05-16 18:12:001118browse
When using JQuery, if you want to find a container (such as a div or some sub-elements in a table), it is easy to use the find method. find will use iteration to find all sub-elements that meet the conditions, and can set css and other content uniformly and in batches.
For example, there is a table like this:
Copy the code The code is as follows:
| ||||
| First Table, row 2, column 1 | First Table, row 2, column 2 < /td> |
Now it is required to set all fonts to blue, just do this directly.
$("table").css("color", "blue");
Note: $("table") means that "every table" on the page is set like this.
Look at a complex example below -
[Set the font of the second row and second column of each table to red]
Maybe you may think this way - because $("table") means "each table", so if you write "$(table tr:eq(1) td:eq(1)).css("color","red"); you are done (every The second row and second column of a table)...
Is this really the case? If you run the result, you will be surprised - because only "Inline Table, row 1 column 1" turns red! It's not the result we expected.
Why? The reason is simple - because if JQuery separates html tags or other related attributes by spaces, it means that it searches for self-tags one by one until the conditions are met. It becomes "Search for 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 red!" ”
The complete definition is given below -
$("HTML tag, html sub-tag: eq(n) html sub-sub tag: eq(n)...): from HTML tag (parent) Find the n 1st sub-tag that meets the condition, and then search for the n 1-th sub-tag in the n 1-th sub-tag... until all are traversed.
So this method is wrong, especially for beginners.
So what should we do? Someone thought of this method -
Copy code The code is as follows:
$("table" ).each(function () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");
}) ;
His reason is: traverse each table, and then set the color of the second row and second column of each table.
Compared with the first answer, the second person seems to be a little smarter. He realized that the "table" parent tag will not search repeatedly on its own (JQuery will only deeply traverse the innermost one when setting the tag. Label, that is, the infinite part of the "..." defined by blue). So I thought of using each - admittedly, each does solve the problem of deeply traversing the table, but the find of the first table is still executed according to the blue part (still looking for the second tr in the parent table, and the second tr in the second tr. The second td), so find only performs deep traversal of the last HTML.
At this time we can only use this method:
$("tr:nth-child(2) td:nth-child(2)").css("color", "red" );
nth-child(n) is a method of CSS pseudo-class that can be used in JQuery. The meaning of this code is: find the container element closest to the nth tr, and then set it.
In this way, "tr:nth-child(2)" will correspond to two