왜이 요소 참조를 변수로 설정할 수 없습니까?

Question

나는 (단순화 된) 자바 스크립트 객체를 가지고있다.

var MyObject = (function(){ 

    var propertyOne = $('.links li:first-child'); 
    var propertyTwo = $('.links .active'); 

    function startup() 
    { 
    propertyOne.addClass("class"); //Works 
    propertyTwo.addClass("class2"); //Does not work 
    $('.links .active').addClass("class2"); // Works 
    } 

    return { 
    init: function() 
    { 
     startup(); 
    } 
    } 
}); 

propertyOne 및 propertyTwo를 선택하는 방법의 차이점은 무엇입니까?

propertyOne.addClass("class"); //Works 
$('.links .active').addClass("class2"); // Works 

그러나 ...

propertyTwo.addClass("class2"); //Does not work 

이 사람이 나에게 이것을 설명 할 수 왜 이해가 안 돼요?

Answer 1

var propertyTwo = $('.links .active')이 호출 될 때 propertyTwo의 DOM 요소는 존재하지 않아야하며, 한번만 startup()이 호출됩니다.

확인하려면 스크립트에 대한 추가 정보가 필요합니다. 예를 들어 DOM을 완전히로드하기 전에 MyObject을 만든 다음 DOM이 완전히로드 된 후 (또는 최소한 $('.links .active')에 해당하는 요소를로드 한 후에) init() 메서드를 호출하면 앞에서 설명한 내용이 발생할 수 있습니다.

이 특정 시도가 작동하지 않는 이유와 함께 이와 같은 것을 디버깅하는 방법에 중점을 두어야합니다.이 과정의 주요 단계는 var propertyTwo = $('.links .active') 줄 바로 뒤에 콘솔 propertyTwo에 로그온하는 것입니다. 콘솔에 [] (Chrome에서 적어도), 일치하는 요소가 없다는 것을 의미합니다. 이는 내가 말한 것을 지원합니다.