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

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

1번째

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.length > 3 } );

$.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() 메소드를 사용하여 특정 조건에 맞는 데이터만 사용한다.

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

- grep()

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

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

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

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