컴퓨터 프로그래밍/JQuery
each()
깝돌이
2020. 5. 28. 13:46
0. each()-기본:
1. each()-array
2. each()-select()
3. each()-checkbox
4. 코드잇 each()활용: 홀수 짝수
0. each()-기본
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*클래스 속성의 값으로 스타일을 지정.....*/
.high_light_0{background: yellow}
.high_light_1{background: pink}
.high_light_2{background: cyan}
.high_light_3{background: green}
.high_light_4{background: purple}
.high_light_5{background: magenta}
.high_light_6{background: gray}
.high_light_7{background: orange}
/*속성 하나 더 추가*/
.fontstyle{color:blue; font-family: sans-serif;}
.nth{border: 5px double black;}
</style>
<!--each():: 일종의 for문과 같다....
* 동일한 태그가 반복적으로 나왔을 때 적용하는 함수....
h1 태그의 갯수만큼 each() 함수가 수행된다고 볼수 있다... 내부적으로 index가 돌아간다.
첫번째 index는 당연히 0이 된다.
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('h1').each(function(index){
//$('h1').addClass('high_light_'+index);//이렇게 하면 마지막 index로 덮어 씌워짐 다 orange임.
//왜냐하면 h1은 전체 h1을 선택하는 것이기 때문입니다.
$(this).addClass('high_light_'+index); //이를 해결하기위해서는 자기 자신을 가리키는 this 를 해야합니다.
})
//2. 마지막 h1태그를 선택자로 지정...fontstyle을 ...
$('h1').last().addClass('fontstyle');
//3. 여러개의 h1 태그중에서 짝수 번째 ...nth을....
$('h1:even').addClass('nth');
});
</script>
</head>
<body>
<h1>Item-0</h1>
<h1>Item-1</h1>
<h1>Item-2</h1>
<h1>Item-3</h1>
<h1>Item-4</h1>
<h1>Item-5</h1>
<h1>Item-6</h1>
<h1>Item-7</h1>
</body>
</html>1. each()-array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>array_each</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#eachBtn').click(function() {
var array = [];//JQuery에서는 이와같이 배열을 생성합니다.
array.push('이나영');
array.push('원빈');
array.push('고소영');
array.push('장동건');
//alert(array.length);
//alert(array.toString());
//배열이 잘 생성됐는지 확인해 줍니다.
var data="";
/* //1. for 문을 사용해서 alert창 한번 뜨고 그 안에 이름, 이름, 이름, 이름
for(var i=0; i<array.length;i++){
data+=array[i]+" ";// toString()이 생략되어있습니다.
}
alert(data); */
/* //2. each()함수를 이용해서 순회합니다.
$(array).each(function(index) {
//alert(index+1+"."+array[index]);
//이렇게도 한번 출력해볼수도 있습니다.
data+=array[index]+" ";
});
alert(data); */
/* //3. each()함수를 다르게도 쓸 수 있습니다.
$.each(array, function(index) {
data+=index+1+"."+array[index]+" ";
})
alert(data);
alert($.inArray('장똥건', array));
// 배열안에 찾는 값이 있으면 해당 index를 return하고 없으면 -1을 리턴합니다. */
});
});
</script>
</head>
<body>
<input type="button" value="배열에 each() 적용" id="eachBtn">
</body>
</html>
2. each()-select()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select_each</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. 새로운 option tag들을 추가하는 코드_1
/* //클릭 할때 마다 추가가 되는 걸 막기위한 방법1
$('#addOptionBtn').on('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
//1.each()함수를 사용하여 배열안의 사람의 이름을 select>option 이라는 자식 태그를 만들어서 붙임... append()를 사용합니다.
var a = $(arr).each(function(index) {
var option='<option value='+arr[index]+'>'+arr[index]+'</option>'
$('#friend').append(option);//html()이거 하면 마지막꺼만 들어감.
})//each
$(this).unbind();
})
//클릭 할때 마다 추가가 되는 걸 막기위한 방법2
$('#addOptionBtn').one('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
//1.each()함수를 사용하여 배열안의 사람의 이름을 select>option 이라는 자식 태그를 만들어서 붙임... append()를 사용합니다.
var a = $(arr).each(function(index) {
var option='<option value='+arr[index]+'>'+arr[index]+'</option>'
$('#friend').append(option);//html()이거 하면 마지막꺼만 들어감.
})//each
}) */
//2.새로운 option tag들을 추가하는 코드_2
$('#addOptionBtn').one('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
var a = $(arr).each(function(index, item) {
var option='<option value='+item+'>'+item+'</option>'
$('#friend').append(option);
})//each
})
//3. 생성된 폼을 제거....remove();
$('#deleteOptionBtn').click(function() {
$('#friend>option').remove();
})//each
});
</script>
</head>
<body>
<input type="button" value="옵션 생성" id="addOptionBtn">
<input type="button" value="옵션 삭제" id="deleteOptionBtn">
<select id="friend"></select>
</body>
</html>
3. each()-checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#frm').submit(function() {
//1. id, name 폼의 공란을 체크합니다. 공백일때 alert창 띄웁니다. 포커스 맞춥니다. 실행이 안되도록 합니다.
//2. checkbox에 하나이상의 값을 넣도록 합니다. 공백일때 alert창을 띄웁니다.
//3. 하나이상의 값이 입력되면 each()를 사용하여 alert로 출력합니다.
//4. confirm창을 통해서 "3개의 취미를 선택하셨습니다. 전송하시겠습니까?" 전송/미전송
var id="";
var name="";
id = $('#id').val();
name = $('#name').val();
if(id==""){
alert("ID 입력해 주세요.");
$('#id').focus();
return false;
}
if(name==""){
alert("NAME을 입력해 주세요.");
$('#name').focus();
return false;
}
//3번 4번 해결-1
/*
var hobbyArr=$('input[name=hobby]:checked');
//alert(hobbyArr.length);
var text = "";
if(hobbyArr.length==0){
alert("하나이상의 취미를 선택하세요");
return false;
}else{
hobbyArr.each(function(index) {
text+=$(this).val()+" ";
})
alert(text);
return confirm("선택하신 "+text+"를 전송하시겠습니까?");
}
*/
//3번 4번 해결-2
/* var hobbyArr=$('input[name=hobby]:checked');
//alert(hobbyArr.length);
var text = "";
if(hobbyArr.length==0){
alert("하나이상의 취미를 선택하세요");
return false;
}else{
$.each(hobbyArr, function(index, item) {
text+=item.value+" ";
})
alert(text);
return confirm("선택하신 "+text+"를 전송하시겠습니까?");
} */
})
});
</script>
</head>
<body>
<form action = "06_result.jsp" id="frm"">
ID<input type="text" name="id" id="id"><p>
NAME<input type="text" name="name" id="name"><p><p>
<strong>당신의 취미를 고르세요.</strong><p>
<input type="checkbox" name="hobby" value="Walking">Walking<br/>
<input type="checkbox" name="hobby" value="베이비시터">베이비시터<br/>
<input type="checkbox" name="hobby" value="독서">독서<br/>
<input type="checkbox" name="hobby" value="헬스">헬스<br/>
<input type="checkbox" name="hobby" value="코딩">코딩<br/>
<input type="submit" value="SEND">
</form>
</body>
</html>
each를 하면 여러개중에서 순서대로 그 객체를 반환하는 것과 같습니다.
그래서 잘 활용해야합니다.
<!DOCTYPE html>
<html>
<head>
<title>홀짝</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<style>
B* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 960px;
background: #eee;
font-family: 'Noto Sans KR', sans-serif;
}
.container {
width: 840px;
margin: 0 auto;
}
.card {
float:left;
width: 10.5%;
margin: 20px 1%;
padding: 15px 0;
font-size: 28px;
text-align: center;
background: #FAFAFA;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
border-radius: 3px;
}
/* 선택된 카드 */
.card.selected {
background: #3E50B4; /* 파란색 */
color: white;
}
.buttons {
text-align: center;
}
.buttons button {
background: none;
border: none;
margin: 30px 5px;
cursor: pointer;
outline: none;
font-size: 20px;
color: #4285F4;
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<div class="card">13</div>
<div class="card">3</div>
<div class="card">14</div>
<div class="card">7</div>
<div class="card">22</div>
<div class="card">38</div>
<div class="card">17</div>
<div class="card">15</div>
<div class="card">11</div>
<div class="card">10</div>
<div class="card">22</div>
<div class="card">31</div>
<div class="card">32</div>
<div class="card">41</div>
<div class="card">10</div>
<div class="card">85</div>
<div class="card">17</div>
<div class="card">82</div>
<div class="card">70</div>
<div class="card">5</div>
<div class="card">53</div>
<div class="card">7</div>
<div class="card">4</div>
<div class="card">29</div>
<div style="clear: both;"></div>
</div>
<div class="buttons">
<button id="even-btn">짝수</button>
<button id="odd-btn">홀수</button>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
<script>
$('#even-btn').on('click', function(){
//모든 카드를 흰색으로 해놓고 해도 됨
$('.card').removeClass('selected');
$('.card').each(function(){
if(eval($(this).text()%2)===0){
$(this).addClass('selected');
}/* else{
$(this).removeClass('selected');
} */
})
});
$('#odd-btn').on('click', function(){
$('.card').each(function(){
if(eval($(this).text()%2)!==0){
$(this).addClass('selected');
}else{
$(this).removeClass('selected');
}
})
});
</script>
</body>
</html>