공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

length - Element 갯수 반환

serpiko 2014. 1. 6. 14:06

   length


코드) body(문서)를 클릭하면 가로20px, 세로20px의 빨간색 사각형이 가로로 증가하되 5개로 제한한다.


        상단 텍스트는 쌓인 div 갯수를 반환한다.

<html>
<head>
<meta charset="utf-8" />
<title> serpiko's div block </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<style>
	.div_block {width:20px; height:20px; background-color:red; float:left;margin:2px;}
	.div_tail {clear:both;}
</style>
</head>

<body>
	<!-- element -->
	<p id="text">div의 갯수 : 1</p>
	<div class="div_block"></div>
	
	<!-- js -->
	<script>
	var count=1;
	$(document).ready(function(){
		$('body').click(function(){
			
			count++;

			if(count % 5 == 0){
				$(this).append("<div class='div_block'></div>").append("<div class='div_tail'></div>");
			}else{
				$(this).append("<div class='div_block'></div>");
			}

			lenDisplay();
			
		});

		function lenDisplay(){
			var len = $("body div").length;
			$('#text').text("div의 갯수 : " + len);
		}
	});
	</script>
</body>
</html>

 

 


결과)


저작자표시 비영리 동일조건 (새창열림)

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

제이쿼리 변수와 셀럭터의 조합  (0) 2014.01.15
버튼핸들러  (0) 2014.01.06
on() - selectstart, dragstart 로 마우스 드래그방지  (2) 2014.01.06
자바스크립트 롤링배너  (0) 2013.11.27
제이쿼리 반복실행  (0) 2013.11.06
댓글