object is not a function 에러 발생!!

jquery를 사용하여 동적으로 하위 리스트를 숨김/표시 하는 기능을 만들던 중

"object is not a function" 이라는 에러를 만났다.

 

그룹1
 

  
맴버1
  
맴버2
  
맴버3


그룹2
 

  
맴버4
  
맴버5
  
맴버6

 

위와 같은 html코드가 있을때 브라우저에서는 다음과 같이 나타난다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

 

여기서 jquery를 사용하여 그룹1, 그룹2를 클릭할때 그 하단의 맴버 목록을 숨김/표시하는 기능을 넣고

처음 페이지가 보여질때 목록이 숨겨진 상태로 표시하려 하였다.

 

그래서 코드를 다음과 같이 작성하였다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

 

위와 같이 하면 "object is not a function" 이라는 에러가 난다.

 

그래서 alert으로 다음과 같이 찍어보았다. 그 결과는

1. alert($(this)); -> [object Object]
2. alert($(".group").get(0)); -> [object HTMLLIElement]

 

결과적으로 두 방식은 서로 다른 타입의 object를 반환하여 생기는 문제...

 

그래서 아래와 같이 처리하였다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

 

다른 해결 방법도 있겠지만 일단 패스~~~ ^^;

 

* 추가 사항

위 코드에서

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

var obj_id= $(".group").get(i).id;
$("#"+obj_id).children("ul").css("display", "none");

 

부분을 아래와 같이 해도 된다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

$($(".group").get(i)).children("ul").css("display", "none");