jquey 를 사용하다보면 배열이라던지 json 으로 ajax통신으로 받은 내용을 동적으로 화면에 생성을 해줘야하는 경우가 종종 있는데 이것을 응용한다면 화면에 좀 더 dynamic하게 화면을 구성할 수 있지않을까해서 정리를 해본다.
아래의 예를 단순한 예를 가지고 적용을 해 본것이니 구현단계에서는 다르게 보아도 무방하리라 생각이 든다.
var arr = [
{name: '네이버', url : 'http://www.naver.com'},
{name: '다음', url : 'http://www.daum.net'}
];
var data = "";
$.each(arr, function(i, element){
data += "<a href='"+element.url+"' >" + element.name + "</a><br />";
});
$(#div).html(data)
위와 같이 구현을 해주면 된다.
each 메소드 는 보통 아래와 같은 형식으로 많이 써준다.
$.each(object, function(index,item){
}); => object 요소의 길이만큼 반복해서 실행 , index : 0 부터 시작, item : 현재 each method 에 의해 선택된 객체
$(선택자).each(function(index, item){
}); => selector 요소의 길이만큼 반복하면서 함수를 실행 , 나머지는 위와 동일
Jquery로 특정 ID값이 포함된 것을 찾을 때 (0) | 2020.04.28 |
---|---|
jquery 로 img src의 값 변경하기 (0) | 2019.03.28 |
jquery datepicker에서 특정날짜만 허용되도록 할때 (0) | 2014.05.29 |
jquery 로 host 정보 알아내기 (0) | 2013.07.08 |
px을 em 단위로 환산해 주는 사이트 (0) | 2012.07.11 |