[JQUERY] 노드의 갯수 세고 노드안의 텍스트를 표시

노드 개수 세고 노드안의 텍스트 표시하기

특정 노드의 갯수를 세고 그 노드안의 텍스트 표시해줍니다.

1. 샘플예제

test_01

test_02

test_03

test_04

결과 :

2. 소스코드

//==script start=========================================================

<script type="text/javascript">

$(document).ready(function(){

});

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

// function Name : uf_TextAlert()

// Desc          : 특정 id의 텍스트 값 표시

// input         : 없음

// output        : 없음

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

function uf_TextAlert(){

var nodes = $("#root").children();

var sResultTxt = "nodes.length : " + nodes.length + "\n";

sResultTxt += "TEXT : ";

$("#root").children().each( function(){

sResultTxt += $(this).text();

sResultTxt += " ";

});

alert(sResultTxt);

}

</script>

//==script end=========================================================

//==HTML start========================================================

<div id="root">

<div>test_01</div>

<div>test_02</div>

<div>test_03</div>

<div>test_04</div>

</div>

<br/>

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

//==HTML end========================================================

3. 설명

id="root"인 div의 모든 자식 엘리먼트를 접근하여 "nodes"라는 변수에 할당합니다.

each() 메소드를 통해 id="root"인 div의 모든 엘리먼트를 한번에 하나씩 접근하여 text() 메소드를 사용하여 "sResultTxt"라는 문자열 변수 뒤에 연결합니다.

마지막으로 모든 자식의 텍스트를 alert()메소드를 통해 표시합니다.

-children()

 : 지정한 엘리먼트의 바로 아래 자식 노드들을 찾아 jQuery 오브젝트로 반환하는 트리 순회 메소드입니다.

   id="root"인 div의 한단계 아래에 정의된 노드를 접근합니다.

- each()

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

- text()

 : 선택한 엘리먼트의 텍스트 내용을 접근하는데 사용하는 jQuery 오브젝트의 메소드입니다.