제이쿼리 - each 반복문

프로그래밍/jQuery 제이쿼리 2021. 10. 29.

each로 반복문을 수행 할 수 있지만 break나 continue 같은 개념이 없다.

return false로 중간에 빠져 나와야 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

h3 {
	margin: 10px;
}

.box{
	width: 700px;
	margin: 30px auto;
}
.box table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.box table tr:first-child{
	border-top: 3px solid #777;
	background: #ccc;
}
.box table tr{
	height: 30px;
	border-bottom: 1px solid #777;
	text-align: center;
}

.box table span{
	cursor: pointer;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$("table.cls td").each(function(index){
		if(index != 0 && index % 6 == 0) {
			$(this).css("color", "tomato");
		}
	});
});

/*
-- 반복
  .each() : 선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행한다.
*/
</script>

</head>
<body>

<h3>each</h3>

<div class="box">
<table class="cls">
	<tr>
		<th width="80">학번</th>
		<th width="100">이름</th>
		<th width="80">국어</th>
		<th width="80">영어</th>
		<th width="80">수학</th>
		<th width="80">총점</th>
		<th width="80">평균</th>
		<th>변경</th>
	</tr>
	<tr>
		<td>1001</td>
		<td>너자바</td>
		<td>80</td>
		<td>70</td>
		<td>90</td>
		<td>240</td>
		<td>80</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1002</td>
		<td>서블릿</td>
		<td>75</td>
		<td>80</td>
		<td>60</td>
		<td>225</td>
		<td>75</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1003</td>
		<td>스프링</td>
		<td>80</td>
		<td>100</td>
		<td>90</td>
		<td>270</td>
		<td>90</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1004</td>
		<td>오라클</td>
		<td>85</td>
		<td>85</td>
		<td>85</td>
		<td>255</td>
		<td>85</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1005</td>
		<td>리액트</td>
		<td>80</td>
		<td>70</td>
		<td>60</td>
		<td>210</td>
		<td>70</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1006</td>
		<td>홍자바</td>
		<td>85</td>
		<td>85</td>
		<td>85</td>
		<td>255</td>
		<td>85</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1007</td>
		<td>이순신</td>
		<td>70</td>
		<td>70</td>
		<td>70</td>
		<td>210</td>
		<td>70</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1008</td>
		<td>이자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
		<td>300</td>
		<td>100</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1009</td>
		<td>가나다</td>
		<td>95</td>
		<td>100</td>
		<td>90</td>
		<td>285</td>
		<td>95</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1010</td>
		<td>하하하</td>
		<td>90</td>
		<td>90</td>
		<td>90</td>
		<td>270</td>
		<td>90</td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
	<tr>
		<td>1011</td>
		<td>후후후</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td><span>수정</span> | <span>삭제</span></td>
	</tr>
</table>
</div>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".btn1").click(function(){
		var arr = [1,3,5,7,9];
		var s = 0;
		$.each(arr, function(index, value){
			s += value;
		});
		alert("홀수합 : " + s);
	});
	
	// 다른 방법
	$(".btn2").click(function(){
		var arr = [2,4,6,8,10];
		var s = 0;
		$(arr).each(function(index, value){
			s += value;
		});
		alert("짝수합 : " + s);
	});
	
});

</script>

</head>
<body>

<h3>each - array</h3>

<div style="margin: 20px;">
	<button type="button" class="btn btn1"> 배열-1 </button>
	<button type="button" class="btn btn2"> 배열-2 </button>
</div>

</body>
</html>

이렇게 each로도 배열 반복문을 돌릴 수 있다.

index는 arr의 인덱스고, value는 그 인덱스에 따른 값이다.

그러니까 0번 인덱스부터 끝까지 돌면서 s에 합들을 넣는 것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

.btn {
    color:#333;
    font-weight:500;
    border:1px solid #cccc;
    background-color:#fff;
    text-align:center;
    cursor:pointer;
    padding:3px 10px 5px;
    border-radius:4px;
}
.btn:active, .btn:focus, .btn:hover {
	 background-color:#e6e6e6;
	 border-color: #adadad;
	 color: #333;
}
.boxTF {
    border:1px solid #999;
    padding:4px 5px 5px;
    border-radius:4px;
    background-color:#fff;
}
.boxTA {
    border:1px solid #999;
    height:150px;
    padding:3px 5px;
    border-radius:4px;
    background-color:#fff;
    resize: none;
}

textarea:focus, input:focus {
	outline: none;
}

h3 {
	margin: 10px;
}

.box{
	width: 650px;
	margin: 30px auto;
}

.box table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.board-title {
	width:100%;
	height:50px;
	line-height:50px;
	text-align:left;
	font-weight: bold;
	font-size:15px;
}

.board-body tr:first-child{
	border-top: 3px solid #777;
}
.board-body tr {
	height: 40px;
	border-bottom: 1px solid #777;
}
.board-body td:first-child{
	text-align: center;
	width: 100px;
	background: #eee;
}

</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function sendOk() {
	var f = document.boardForm;
	
	var returnNow = false;
	var s;
	$("form input, form textarea").each(function(){ // each는 브레이크 컨티뉴가 없음
		if(! $(this).val().trim()) {
			s = $(this).closest("tr").find("td:first-child").text();
			
			s = s.replace(/\s/g,'');
			alert(s + "을(를) 입력하세요.")
			
			$(this).focus();
			returnNow = true;
			return false; // 이렇게 해야 빠져 나감
		}
	});
	if(returnNow) return;
	
	alert("보내기 성공");

}
</script>

</head>
<body>

<h3>each - break 구현</h3>

<div class="box">
	<div class="board-title">
    	<h3><span>|</span> 게시판</h3>
	</div>
	
	<form name="boardForm" method="post">
	  <table class="board-body">
	  <tr> 
		  <td >제 목</td>
		  <td style="padding-left:10px;"> 
			<input type="text" name="subject" maxlength="100" class="boxTF" style="width: 97%;">
		  </td>
	  </tr>

	  <tr> 
		  <td>작성자</td>
		  <td style="padding-left:10px;"> 
			<input type="text" name="name" size="35" maxlength="20" class="boxTF">
		  </td>
	  </tr>

	  <tr> 
		  <td style="padding-top:5px;"  valign="top">내 용</td>
		  <td valign="top" style="padding:5px 0px 5px 10px;"> 
			<textarea name="content" cols="75" rows="12" class="boxTA" style="width: 97%;"></textarea>
		  </td>
	  </tr>

	  <tr>
		  <td>패스워드</td>
		  <td style="padding-left:10px;"> 
			   <input type="password" name="pwd" size="35" maxlength="7" class="boxTF">&nbsp;(게시물 수정 및 삭제시 필요 !!!)
		   </td>
	  </tr> 
	  </table>

	  <table>
		 <tr align="center"> 
		  <td height="45">
			  <button type="button" class="btn" onclick="sendOk();"> 등록하기 </button>
			  <button type="reset" class="btn"> 다시입력 </button>
			  <button type="button" class="btn"> 취소하기 </button>
		  </td>
		</tr>
	  </table>
	</form>
</div>

</body>
</html>

each 반복문을 이용해서 각각 내용을 하나라도 입력하지 않으면 등록하기 버튼이 다음으로 안넘어 간다.

function sendOk() {
	var f = document.boardForm;
	
	var returnNow = false;
	var s;
	$("form input, form textarea").each(function(){ // each는 브레이크 컨티뉴가 없음
		if(! $(this).val().trim()) {
			s = $(this).closest("tr").find("td:first-child").text();
			
			s = s.replace(/\s/g,'');
			alert(s + "을(를) 입력하세요.")
			
			$(this).focus();
			returnNow = true;
			return false; // 이렇게 해야 빠져 나감
		}
	});
	if(returnNow) return;
	
	alert("보내기 성공");

}

스크립트 부분만 따로 보자

대상은 form 안에 input과 textarea들이고 이놈들을 each로 반복문을 돌린다.

if문 = 만약 값이 없다면(값은 trim으로 공백 제거 했음) 선택한 항목(this)의 가까운 tr 태그 중에서

td의 첫번째 자식의 text값을 찾는다.

모든 띄어쓰기를 제거하고 알림창을 띄워서 이 부분을 입력하라고 알려준다.

그리고 포커스로 입력할 곳 활성화 시켜준다.

그리고 밖에서 반복문이 끝났는지 안끝났는지 알려주기 위해서 returnNow를 이용해서

만약 반복문이 다 돌았으면 returnNow가 false인 채로 밑으로 내려와서 if문 지나쳐서 alert를 실행 할 것이고

반복문이 다 안돌았으면 반복문 내부에서 returnNow가 true로 되어 있기 때문에

반목문을 나와도 if문에 걸려서 그냥 return 되어버린다.

저작자표시

'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글

제이쿼리 - 기초(4) (0)	2021.10.30
제이쿼리 - 기초(3) / 이벤트 (0)	2021.10.30
제이쿼리 - 기초(2) (0)	2021.10.29
제이쿼리 - 애니메이션 처럼 보이게 만들기 (0)	2021.10.29
jQuery 제이쿼리 기초 (0)	2021.10.27

ABOUT ME

'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바