Examples of find and each method usage in Jquery
This article mainly introduces the usage of the find and each methods in Jquery. Examples of the functions, definitions, and usage skills of the find and each methods are analyzed. For more information, see
This document describes how to use the find and each methods in Jquery. Share it with you for your reference. The details are as follows:
I. find () method
The jquery selector is very powerful. Using css naming conventions, you can quickly and conveniently find the desired elements.
For example:
1
2
3
4 $ ("# id ")
$ ("#" + "Id ")
$ (This)
$ (Element)
And so on, as long as they are used flexibly, they will be able to generate powerful shapes.
However, in actual use, I still feel that there are some shortcomings.
If you want to search for a specific element under an element, you must traverse the elements obtained by $ ("# id") to obtain its child elements. As a result, the Code volume is extremely large.
Therefore, the find () method is used.
1
2
3 $ ("# id"). find ("# child ");
$ ("# Id"). find (". child ");
$ ("# Id"). find ("input [type = 'image']");
Very convenient and easy to use.
In addition to the find () method above, there is also a method for finding child elements.
1 $ (". child", parent );
This method is the same as the result of the find () method and is more concise.
For example:
1
2
3 function (table ){
$ ("Tr", table).css ("background-color", "red ");
}
This method facilitates code reuse and is more in line with closure writing.
Ii. each () method
Arrays are often used. Before I know the each () method, if I encounter array traversal, I usually write it like this:
1
2
3
4
5
6
7
8
9
10var arr = new Array ();
Arr. push (1 );
Arr. push (2 );
Arr. push (3 );
For (var I = 0; I
{
(Function (m ){
Console. log (this );
}) (I );
}
What a hassle !! Now, with each (), life has become easier.
The above Code contains only one sentence.
1
2
3
4
5
6
7
8var arr = new Array ();
Arr. push (1 );
Arr. push (2 );
Arr. push (3 );
Arr. each (function (){
Console. log (this );
});
After using each, the structure becomes concise and elegant.
I hope this article will help you with jQuery programming.