jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자

이번장은 간단하게 공백제거 함수와 반복문에 대하여 알아보도록 하겠습니다.

$.trim() 공백제거함수

문자열 혹은 text와 같이 공백이 들어있을경우 

데이터 전송시 문제가 발생할 일이 가끔 발생이 되곤합니다.

양쪽공백을 제거하기 위하여 $.trim()함수를 이용하여 

공백을 제거할 수 있습니다.

<input type="text" value="        aaaaa            "/>

$(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태그

<input type="text" value="a"/><br/>
<input type="text" value="b"/><br/>
<input type="text" value="c"/><br/>
<input type="text" value="d"/>

jQuery코드

$(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태그의 엘리먼트는 필요가 없으며 스크립트 코드를 다음과 같이 대체합니다.

$(function(){
	var json = [{
					data : 'a'
				},{
					data : 'b'
				},{
					data : 'c'
				}]
	$.each(json,function(index,object){
		console.log(index,object.data);
	})
})

엘리먼트가 아닌 노드에서는 $.each문의 첫번째 입력값으로 json 배열값을 , 

두번째 입력값을 이전 each문과 동일한 function을 지정해주면 되겠습니다.

현재는 이해가 정확히 가지 않으시겠지만 

이후 다른 샘플을 진행하면서 이해를 돕도록 하겠습니다.

by 개발로짜