[JQUERY] 배열을 사용하여 이름을 대문자로 변경하여 표시하기

배열을 사용하여 이름을 대문자로 변경하여 표시하기

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"];

  arrMembers = $.map( arrMembers, function( n, i ){ return ( i + 1 + "." + n.toUpperCase() ); } );

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

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

});

//$("#GroupList").html(arrMembers.join("<br/>"));

}

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

// function Name : uf_DelList()

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

// input         : 없음

// output        : 없음

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

function uf_DelList(){

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

}

</script>

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

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

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

<p id="GroupList"></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배열을 사용하여 이름을 저장한다.

map() 메소드를 사용하여 배열의 이름들을 대문자로 변경한다.

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

- map()

  map(array, callback( n, i ) )

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

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