[JQUERY] 배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기_02

배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기

두번째

javascript배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기 두번째 방법

1. 샘플예제

내그룹에 포함된

내그룹에서 선택된

- 결과 : 

2. 소스코드

<%----javascript start-----------------------------------------------------%>

<script type="text/javascript">

$(document).ready(function(){

});

//==================================================

// function Name : uf_ListMake()

// Desc          : 특정 id의 엘리먼트에 배열을 사용하여 추가하기

// input         : 없음

// output        : 없음

//==================================================

function uf_MakeList(){

var arrMembers = ["john", "lan", "Ben", "Damon"];

var arrMemberSels = "";

$.each( arrMembers, function( index, value ){

$( "#GroupList" ).append( $("<li>" + value + "</li>") );

});

arrMemberSels = $.grep( arrMembers, function( n ){ return n.match( /^[A-D]/ ) } );

$.each( arrMemberSels, function( index, value ){

$( "#GroupListSel" ).append( $("<li>" + value + "</li>") );

});

}

//==================================================

// function Name : uf_DelList()

// Desc          : 특정 id의 엘리먼트를 삭제한다.

// input         : 없음

// output        : 없음

//==================================================

function uf_DelList(){

$( "#GroupList" ).html("");

$( "#GroupListSel" ).html("");

}

</script>

<%----javascript end-----------------------------------------------------%>

<%----HTML start---------------------------------------------------------%>

<h2>내그룹에 포함된</h2>

<p id="GroupList"></p>

<br/>

<h2>내그룹에서 선택된</h2>

<p id="GroupListSel"></p>

<br/>

<button id="click_01" class="button button1" onclick="uf_MakeList()">리스트 표시</button>

<button id="click_02" class="button button3" onclick="uf_DelList()">리스트 삭제</button>

<%----HTML end-----------------------------------------------------------%>

3. 설명

javascript배열을 사용하여 이름을 저장한다.

id="GroupList"인 p 태크의 엘리먼트에 배열을 모든 원소를 추가한다.

grep()와 match() 메소드를 사용하여 각 배열 원소에 A~D의 문자가 포함된 데이터만 사용한다.

id="GroupListSel"인 p 태크의 엘리먼트에 배열을 추가한다.

- grep()

  grep(array, callback( n, i ), boolean )

 : 배열의 각 원소들을 순회하면서 각 원소들에 대해 콜백함수를 호출한다.

 : callback 에는 n, i 파라미터가 있으며 n은 배열의 원소, i는 각 배열의 원소의 위치(0부터 시작)

 : boolean은 보통 생략되며, Default : false, true로 지정 시 결과의 정반대 값들이 반환된다.

 

- match()

 : 정규식을 사용하여 정규식에 맞는 데이터를 표시한다.

 : 정규식 표기법

\b	단어의 경계
\d	숫자(0~9)
\s	공백하나
\w	문자, 숫자, 밑줄 문자
.	새 라인 문자를 제외한 모든문자
[..]	대괄호 안의 문자들 중 하나
{n}	정확히 n번
{n, }	n번 또는 그이상
{n,m}	n과 m 사이
?	0 또는 여러번
+	한 번 또는 그이상
^	시작
$	끝