將jQuery選擇器存儲到變量中不起作用？

Question

所以我試圖存儲一個jQuery選擇器內的變量，但我的代碼不工作時，我使用它，但它的工作原理時，我直接鍵入選擇器。

下面是不起作用的代碼：

$(function(){ 
    selector = $('.mtitle'); 

    for (var i=0; i<10; i++){ 
     $('div').append('<h1 class="mtitle">Loading...</h1>'); 
    } 
    for (var j=0; j<10; j++){ 
     selector.html("hi"); 
    } 
}); 

而這裏的，做的工作代碼：

$(function(){ 
    selector = $('.mtitle'); 

    for (var i=0; i<10; i++){ 
     $('div').append('<h1 class="mtitle">Loading...</h1>'); 
    } 
    for (var j=0; j<10; j++){ 
     $('.mtitle').html("hi"); 
    } 
}); 

什麼我錯在這裏做什麼？

感謝

Answer 1

當你在一個變量緩存jQuery選擇它存儲返回的當前jquery對象。 因此，當您第一次緩存該變量時，隨後添加它們時，DOM中沒有.mtitle元素。 它不僅僅是一個你正面臨的概念問題的錯誤！

Answer 2

這不是你的意圖完全明確的給我，但我相信要更換所有的Loading...與hi。但是，當你調用這個：

selector = $('.mtitle'); 

你沒有存儲選擇，而是一套組件，比賽選擇。當您將追加選擇與此代碼相匹配的多個元素：因爲選擇已經執行

$('div').append('<h1 class="mtitle">Loading...</h1>'); 

原selector變量不會包含新的h1元素的引用。

第二個代碼起作用，因爲匹配元素的選擇已完成新元素已創建。

但是，如果你刪除的第二for循環，將工作一樣好，因爲這個調用實際上取代了內容每.mtitle與hi：

$('.mtitle').html("hi"); 

Answer 3

其他人已經描述了爲什麼這是行不通的，但是這是你所需要的改變，以得到它的工作

$(function(){ 
    selector = '.mtitle'; // the actual selector, not the object(s) 

    for (var i=0; i<10; i++){ 
     $('div').append('<h1 class="mtitle">Loading...</h1>'); 
    } 
    for (var j=0; j<10; j++){ 
     $(selector).html("hi"); // search the DOM as it is now using the selector 
    } 
});