jQuery Traversing - Filtering
1. Narrow Down The Search For Elements
Filtering 메소드의 가장 기본적인 3 가지는 first(), last(), eq() 입니다.
2. jQuery first() Method
first() 메소드는 선택된 요소의 첫번째 요소를 반환합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("div p").first().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is the first paragraph in body.</p> <div style="border: 1px solid black;"> <p>This is the first paragraph in a div.</p> <p>This is the last paragraph in a div.</p> </div><br> <div style="border: 1px solid black;"> <p>This is the first paragraph in another div.</p> <p>This is the last paragraph in another div.</p> </div> <p>This is the last paragraph in body.</p> </body> </html> | cs |
3. jQuery last() Method
last() 메소드는 선택된 요소의 마지막 요소를 반환합니다.
| $(document).ready(function(){ $("div p").last(); }); | cs
|
4. jQuery eq() method
eq() 메소드는 선택된 요소의 특정 인덱스 넘버의 요소를 반환합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("p").eq(1).css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald (index 0).</p> <p>Donald Duck (index 1).</p> <p>I live in Duckburg (index 2).</p> <p>My best friend is Mickey (index 3).</p> </body> </html> | cs |
5. jQuery filter() Method
filter() 메소드는 기준을 명시합니다. 선택된 요소 중에 기준에 부합하지 않는 요소는 배제하고 기준에 맞는 요소만 반환합니다.
| $(document).ready(function(){ $("p").filter(".intro"); }); | cs
|
6. jQuery not() Method
not() 메소드는 기준에 부합하지 않는 모든 요소들을 반환합니다.
팁: not() 메소드는 filter() 메소드와 반대입니다.
| $(document).ready(function(){ $("p").not(".intro"); }); | cs |