자바스크립트, Jquery를 이용해 DIV, SPAN 등 요소(element)를 배열로 사용하고 싶을 때

스크립트를 사용해서 동적 페이지를 구현 할 때 div, span 등의 태그를 배열로 접근 하고자 할 때가 있다.

<div>content1</div>
<div>content2</div>
<div>content3</div>

예를 들어 이런 내용이 있을 때 JS의 반복문을 이용해서 3개의 div에 차례대로 접근 해야 될 때가 있다.

<div id=dname>content1</div>
<div id=dname>content2</div>
<div id=dname>content3</div>

이렇게 네이밍을 했을 때 $("#dname").eq(0).val()처럼 접근 하면 원하는 결과를 얻지 못한다. id는 그 페이지에서 유일해야 하는 것으로 중복해서 사용 할 수 없다. 그래서 id 대신 클래스 이름을 이용한다.

<div class=cname>content1</div>
<div class=cname>content2</div>
<div class=cname>content3</div>

이렇게 했을 때 두번째 div의 내용을 변경하고 싶을 때는 $("div.cname").eq(1).html("...text...") 처럼 접근 할 수 있다.