이번장은 간단하게 공백제거 함수와 반복문에 대하여 알아보도록 하겠습니다.
$.trim() 공백제거함수
문자열 혹은 text와 같이 공백이 들어있을경우
데이터 전송시 문제가 발생할 일이 가끔 발생이 되곤합니다.
양쪽공백을 제거하기 위하여 $.trim()함수를 이용하여
공백을 제거할 수 있습니다.
1 | <input type="text" value=" aaaaa "/> |
1 2 3 4 5 6 7 8 9 10 11 | $(function(){ var value1 = ' abc '; var value2 = $(":text").val(); //공백제거 전 alert("value1 : " + value1+"\n"+"value2 : " + value2); value1 = $.trim(value1); value2 = $.trim(value2); //공백제거 후 alert("value1 : " + value1+"\n"+"value2 : " + value2);}) |
위 예제는 공백이 존재하는 변수 value1값과 text태그에 양쪽 공백이 존재하는 값을
value 속성에 정의한 후 alert으로 각 출력을 해보았습니다.
위처럼 trim 함수를 이용하여 양쪽 공백을 모두 제거해보았습니다.
$.each / $("selector").each
이번에는 each 문법을 이용하여 동일 엘리먼트 및
json객체의 값들을 출력해보도록 하겠습니다.
동일한 class명칭 및 같은 엘리먼트들과 같이 하나가 아닌
두개이상일 경우 사용되는 문법입니다.
다음 동일한 text 태그 여러개를 태그로 만들어 본 후
each문을 이용하여 text태그들의 값을 출력해보도록 하겠습니다.
HTML태그
1 2 3 4 | <input type="text" value="a"/><br/><input type="text" value="b"/><br/><input type="text" value="c"/><br/><input type="text" value="d"/> |
jQuery코드
1 2 3 4 5 6 7 8 | $(function(){ $(":text").each(function(index){ //방법 1 console.log("this",$(this).val()); //방법 2 console.log("text eq",$(":text").eq(index).val()); })}) |
위처럼 각 index별로 콘솔에 값이 출력되었습니다.
위 console명령을 이용하여 2가지 방법으로 값들을 출력해보았습니다.
$("셀렉터").eq(index).val()
each문의 첫번째 값은 index값을 의미하고 두번째 값은 object를 의미하는것이지만 엘리먼트 each문에서는 무의미합니다.
$(this).val()
$("셀렉터").each({}) 내에서 $(this)를 주게 되면 현재 반복이 위치하는 엘리먼트를 의미합니다.
이어서 json과 같은 object 타입을 each문을 이용하여 출력해보도록 하겠습니다.
기존 body태그의 엘리먼트는 필요가 없으며 스크립트 코드를 다음과 같이 대체합니다.
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ var json = [{ data : 'a' },{ data : 'b' },{ data : 'c' }] $.each(json,function(index,object){ console.log(index,object.data); })}) |
엘리먼트가 아닌 노드에서는 $.each문의 첫번째 입력값으로 json 배열값을 ,
두번째 입력값을 이전 each문과 동일한 function을 지정해주면 되겠습니다.
현재는 이해가 정확히 가지 않으시겠지만
이후 다른 샘플을 진행하면서 이해를 돕도록 하겠습니다.
by 개발로짜
'웹개발강좌 > jQuery' 카테고리의 다른 글
| jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자 (1) | 2015.01.15 |
|---|---|
| jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2) | 2014.12.01 |
| jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
| jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
| jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |