jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성
개요
.length
는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div
요소의 개수를 반환한다.
$( 'div' ).length
예제 1
- 버튼을 클릭하면
li
요소의 개수를 출력한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ).ready( function() { $( 'button' ).click( function() { var n = $( 'li' ).length; $( 'ul' ).after( '<p>There are ' + n + ' lis.</p>' ); } ); } ); </script> </head> <body> <button>Click To Count</button> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </body> </html>
.after()
는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킨다.
예제 2
- li 요소의 개수가 3개를 초과하면 글자를 굵게 만든다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 16px; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { if ( $( 'li' ).length > 3 ) { $( 'li' ).css( 'font-weight', 'bold' ); } } ); </script> </head> <body> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Amet</li> </ul> </body> </html>
.css()
로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다.