티스토리 뷰
728x90
반응형
$(function(){
const $members = [
{"name":"홍길동","blood":"O형"},
{"name":"강감찬","blood":"B형"},
{"name":"이순신","blood":"O형"},
{"name":"유관순","blood":"O형"},
{"name":"안중근","blood":"AB형"},
{"name":"김동주","blood":"A형"}
];
console.log($members[0]); //name:'홍길동',blood:'0형'
console.log($members[0]["blood"]); //0형
$.each($members[0],function($a,$b){
console.log($a);//name,blood
});
$.each($members,function($a,$b){
console.log($a);//0,1,2,3,4,5
console.log($members[$a]["name"]);//이름값 모두 출력(1줄씩)
console.log($members[$a]["blood"]);//혈액값 모두 출력(1줄씩)
});
var $htmlcode ="";
var $oricode = $("#userlist").html(); //기존에 작성된 html코드를 가져옴
$.each($members,function($a,$b){
var $user = $members[$a]["name"];//[$a]:key값.but key값이 없으므로 $a는 인덱스넘버 0,1,2,3,4,5
console.log($user); //이름모두 출력 (1줄씩). 0번지~5번지의 name값
var $blood = $members[$a]["blood"];
$htmlcode +="<tr>\
<td>"+$user+"</td>\
<td>"+$blood+"</td>\
</tr>";
});
$htmlcode = $oricode + $htmlcode; //완전체코드 = 기존코드 + 반복문으로 생성된 코드
$("#userlist").html($htmlcode); //완전체코드 출력
$.map($members,function($a,$b){ //배열값,키값
console.log($a);//모든 배열값
console.log($b);//0,1,2,3,4,5
$($members[$a]).each(function($aa,$bb){ //키값, 배열값
console.log($bb);
});
});
$(Object.keys($members)).each(function($a,$b){
console.log($a);//0,1,2,3,4,5
console.log($b);//0,1,2,3,4,5
$.each($members,function($aa,$bb){ //키값, 배열값
console.log($aa); //(0,1,2,3,4,5)*5번
console.log($bb); //(name:'홍길동'blood:'b형'....모든 값)*5번
});
});
});
728x90
반응형
'Frontend > Jquary' 카테고리의 다른 글
JQ - each, map, Object.keys() (1) (0) | 2023.01.02 |
---|---|
JQ 중급 - FAQ만들기 (1) | 2023.01.02 |
JQ 중급 - 메뉴만들기 (0) | 2023.01.02 |
JQ 애니메이션 (0) | 2023.01.02 |
JQ 기본 3 (0) | 2023.01.02 |
댓글
250x250
반응형
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday