.find（）在調試控制檯中返回對象，但不在代碼中

我的代碼旨在迭代x次，每次將一段HTML插入div。.find（）在調試控制檯中返回對象，但不在代碼中

我主要的HTML看起來是這樣的：

<body> 
    <h1>Main Page Test Title</h1> 
    <div class="container "> 
     <div id="button_list"> 

     </div> 
    </div> 
</body>

想在循環的每次迭代過程中加載HTML是：

<button class=' btn-block btn-lg'> 
    <div class='col-md-4'> 
     <img class="img_class" src='test.png' height='144' width='192'> 
    </div> 
    <div class='col-md-8'> 
     <h3 class="h3_class">Test Title</h3> 
     <p class="p_class">Test, Test, Test keyword, Key, Word</p> 
    </div> 
</button>

我使用的代碼是：

$(document).ready(function() { 
    for(var i = 0;i<5;i++){ 
     var $var = $('<div id="rbtn' + i +'">').load("button_template.html"); 
     $("#button_list").append($var); 

     $var2 = $('#rbtn' + i); 
     $var3 = $var2.find('h3'); 
    } 
});

當我運行此代碼時，按鈕正確填充到主頁面中，並且$var2 = $('#rbtn' + i)選擇器確實會返回一個對象，但額外的$var3 = $var2.find('h3')將返回一個空對象。當我在google chrome調試模式下運行代碼並使用控制檯查看$ var2的值時，我看到了正確的對象。如果在控制檯模式下，我手動鍵入$var2.find('h3');我也會得到正確的對象。但是，當我在代碼中做同樣的事情時，它不起作用。

來源

2016-03-14 Fizzlerr

即使沒有DOM元素與選擇器匹配，您仍然會得到一個沒有附加DOM元素的jQuery對象（即'$ var2.length === 0'）。你到底希望從$（'＃btn'+ i）'返回什麼？ –

呵呵，並且閱讀[load（）]的文檔（http：//api.jquery。com/load /），請確保在回調函數中運行此代碼（使用其中的nessacary僞裝） –

你陷入了一個經典的異步代碼問題。您正在使用$.load()函數填充#rbtn -divs的內容。此功能從服務器加載數據，並在加載過程完成後立即將內容插入#rbtn div。

但是，加載數據不是一個即時過程，即它在某個時間點稍後完成。而且由於Javascript代碼不同步，在呼叫$.load()之後，您在致電$.load()後發出的陳述會在不等待結果的情況下直接進行評估。在Chrome控制檯中工作的原因很簡單，就是您可以在提前完成所有內容的評估之前評估語句。

因此，當您嘗試訪問'<div id="rbtn' + i +'">'的內容時，它們可能不包含h3，因爲加載操作尚未完成。

正確的做法是推遲$var3 = $var2.find('h3')操作，直到$.load()操作完成。爲此，可以使用第三個函數參數$.load()，這是一個專爲此目的而設計的回調函數。由於jQuery-Docs爲.load(url [, data ] [, complete ])狀態，你應該調整你的代碼，包括像

... 
.load("button_template.html", function() { 
    // this function will be executed as soon as the html template has been loaded and injected 
}) 
...

來源

2016-03-14 22:43:43 burnedikt

-2

確保在設置變量之前實例化這些變量。你實例化了$ var，但沒有實例化$ var2和$ var3（除非你把它們設置爲某個地方沒有提供的代碼）。

$(document).ready(function() { 
    for(var i = 0;i<5;i++){ 
     var $var = $('<div id="rbtn' + i +'">').load("button_template.html"); 
     $("#button_list").append($var); 

     var $var2 = $('#rbtn' + i), 
     $var3 = $var2.find('h3'); 
    } 
});

來源

2016-03-14 22:41:58 Korgrue

這不是問題 –

如果不是這個問題，那麼它仍然是一個問題。我得到未定義變量的控制檯錯誤。 – Korgrue

問題是'button_template.html'的內容加載不同步，所以選擇器的部分應該在load（）'的回調函數內運行 - 我沒有downvoted，但是這個解決方案肯定值得它:( –

$ .load（回調）爲異步函數。當代碼運行到find（「h3」）時，您的templ尚未加載。你應該在回調函數中做到這一點。

xxx.load("xxx.html", function(){ 
    xx.find("h3").text("xxx"); 
});

來源

2016-03-14 22:49:57 nich

.find（）在調試控制檯中返回對象，但不在代碼中

回答

相關問題