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

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

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

});

}

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

// 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. 설명

arrMembers 배열에는 4명의 사람 이름을 저장하도록 합니다.

each() 메소드를 사용하여 배열의 각 이름들을 빼내서 id="GroupList"인 p 태그의 엘리먼트에 추가합니다.

- each()

 : 각 엘리먼트를 차례로 접근하는데 사용하는 메소드입니다.