javascript / jquery DIV 내의 자식노드(child node)를 돌면서(loop) 특정 작업을 진행

저는 편집기를 제작 중인데요,

편집기를 이용하여 메뉴도 만들고 컨텐츠도 만들게 되는데,

이때 각각의 슬라이드를 이동하거나 불러오는 경우가 있습니다

이럴 경우, 각 편집화면의 모든 엘리먼트, 

또는 특정 엘리먼트를 불러오거나 집어넣는 작업을 하게 되는데요,

이럴때, 특정 프레임이나 DIV 내에 있는 모든 엘리먼트/ 또는 

특정 엘리먼트를 돌면서(loop) 작업을 하는 코드 입니다.

var c = g_obCurSlide.childNodes;   // 현재 편집중인 슬라이드의 모든 자식노드(childnode)

var i;

for (i = 0; i < c.length; i++)   // 모든 자식노드를 loop

{

var obChild =  c[i].childNodes;  // 자식노드 하나를 가져온다.

for (k = 0; k < obChild.length; k++) 

{

if (( obChild[k].tagName == "IMG" ) && ( obChild[k].id != "my_id" ))  //가져온 엘리먼트가 IMG 이고, 미리 지정한 id 가 my_id 이라면

{

AddObjectToTimeline('', obChild[k], 'IMG', 'ASSIGN' ); // 조건에 맞을 경우 원하는 작업을 진행한다.

}

else if ( obChild[k].tagName == "AUDIO" )  // 가져온 엘리먼트가 AUDIO 이라면 

{

AddObjectToTimeline('', obChild[k], 'MP3', 'ASSIGN' ); // Audio 엘리먼트일 경우 해야할 작업을 진행한다. 

}

}

}

코드 자체가 어려운건 아니지만, 향후 참조를 위해 기록을 남겨둡니다.

아울러, 아래와 같이 each()함수를 이용하여도 코딩이 가능합니다

$("button").click(function(){
    $("li").each(function(){
        alert($(this).text())
    });
});

<ul>

  <li>Coffee</li>

  <li>Milk</li>

  <li>Soda</li>

</ul>