jQuery 에서 다룰 수 있는 Element 요소에 대한 고찰

element.style.display; // ''

element.hide();

element.style.display; // 'none'

 

jQuery 에서 다룰 수 있는 요소는 jQuery Object로 정의되고 있는데, 

이에 해당하지 않는 경우에, jQuery function을 사용하여 Method Chaining을 사용하거나, 함수를 연계시킬 경우

 

".css is not a function"

".hasClass is not a function" 등의 에러메세지를 볼 수 있다.

 

Stack Overflow 의 질문 중에 하나를 살펴보면

 

<script type='text/javascript'> var myElements = jQuery("#navbar > ul > li"); var count = myElements.length; for (var i = 0; i < myElements.length; i++) { myElements[i].style.width = (100/count)+'%'; } var myElements_array = []; for(var i = myElements.length; i--; myElements_array.unshift(myElements[i])); var j = 0; while (! myElements_array[j].hasClass('current-menu-parent') ) { j++; } document.write(j); </script>

 

에서 .hasClass is not a function 이 발생했다고 뜨는데, 이 부분에 대해서

 

Problem is the index you are pulling from the array is a DOM node when you use bracket notation and it is not a jQuery object. DOM does not have hasClass.

 

You can either store the jQuery version or change it to jQuery

while (! $(myElements_array[j]).hasClass('current-menu-parent') ) {

or use classList contains

while (! myElements_array[j].classList.contains('current-menu-parent') ) {

or use eq() instead of referencing the DOM

while (! myElements_array.eq(j).hasClass('current-menu-parent') ) {

 

그러니까 말인 즉슨, 끌어온놈이 DOM node 객체라는 소리고 jQuery object 가 아니라서 에러가 났다는 소리다.

그래서 classList.contains 를 쓰라고 했던 것인데,

 

이 때문에 추가적으로 코드 짤때도 굉장히 고생했다.

https://stackoverflow.com/questions/30630800/jquery-hasclass-is-not-a-function

 

jQuery의 .css function 등등도 다 안먹는 상태에서 다시 깨달음을 얻고...

.style.display = "none"; 으로 설정해서 코드를 완성했다.