예전엔 id 가 여러개 사용되기도 했었는데, 이럴 때 jquery 를 사용하려면..

아래와 같이 div 태그에 id 속성으로 동일한 명칭인 'idA' 가 사용되고 동작도 동일하다고 한다면..

jQuery 를 어떻게 사용해야 하는 것일까요..?

<div id="idA">

  <table onclick="funcA()">

    ...

  </table>

</div>

...

<div id="idA">

  <table onclick="funcA()">

    ...

  </table>

</div>

alert($('#idA').length) 를 해 보면, 역시나 '1' 이 표시됩니다.

그런데, alert(idA.length) 라고 하면, 헉.. '2' 가 표시됩니다. ~.

웹브라우저에 따라 약간 다르긴 하겠지만, id 가 여럿 있어도 에러가 발생하지 않는 환경도 있습니다.

해 보지는 않았는데, strict 와 transitional 의 차이가 아닐까 싶기도 하구요.

그러면 이제 응용을 해야겠네요..

alert($(idA).length) 를 하면 어떤 값이 나오게 될까요..? 후후.. 역시나 2가 나옵니다.

이제 상기 HTML 코드에서 funcA() 함수가 호출되게 하려면 어떻게 해야 할까요..?

$(idA).find('table').each(function(){

  this.onclick = funcA;

});

만약 기존 함수는 건드리지 말아야 하고, 기존 함수의 기능 이외에 추가적으로 기능을 넣고자 한다면..

$(idA).find('table').each(function(){

  this.onclick = function(){

    funcA();

    // 만약 추가적인 내용을 다룬다고 할 때(Overiding)

  }

});

그런데, 최근에 만들어지는 방식이라면 <div id="idA"> 가 아니라, <div class="classA"> 라고 하겠죠..

이러면 아래와 같이 하면 되겠구요..

$('.classA table').each(function(){

  ...

});