2017-09-02 98 views
1

對不起,如果這已被回答,但我搜索了幾個小時試圖找到如何做我想做的事情。我知道PHP可能會有一個更簡單的解決方案,但PHP可能不是一個選項。儘管純JavaScript也很棒,但jquery更可取。通過class name從外部文件獲取div。使用jQuery

我想通過類名從外部文件中獲取div。有多個div使用相同的類名稱。我希望將該類的所有div放入一個數組中,以便在後面的腳本中循環使用。

我試圖保持這個頁面divs的內容同步到一個外部html文件的頁面的divs,這個html文件總是會改變的。但我不確定如何最好地做到這一點。

我已經有很好的結果從csv文件獲取數據到其他項目中的div,沒問題,但是這個讓我感到困惑。

我試過以下(用於測試目的,我只是登錄到控制檯)。我已確認外部文件加載得很好。我可以看到它在Chrome開發工具中加載。但數據從未真正似乎在此後的任何地方。

$(document).ready(function() { 
    var array = []; 
    var testfunc = $('.test').each(function() {array.push(this.innerHTML);}); 

    $.get('sharedResources/Bio.html', function(testfunc){ 
      console.log(array); 
            }); 

}); 

我試過其他的變化,但他們更混亂,腳本開始從當前頁的類而不是外部文件拉。我可以看到當前頁面的innerHTML顯示在控制檯日誌中。

我確定有一種更好的方式,我沒有看到。

我也嘗試了一些我在網上看到的建議,但這也沒有奏效。這給了我'內容是不確定的'錯誤...不要驚訝那一個。

$.ajax('sharedResources/Bio.html').done(function(e) { 
    $('.test').attr('innerHTML', contents); 
});  

對不起,如果我不問這個問題。我不會經常在這些論壇上提出任何問題。

謝謝!

回答

3

假設URL是同一產地內,你真正需要做的是

$.get('sharedResources/Bio.html', function(html){ 
    var elements = $('<div />', {html: html}).find('.className'); 
}).fail(console.log); 

並注意elements是回調函數範圍內使用,因爲它是異步的。

另請注意添加的fail處理程序,並確保您打開控制檯並檢查錯誤。

+0

是,這些網址都是相同的起源。真棒!謝謝sooo ...這很好!一個錯誤,我注意到與接近波形括號,但之後,它工作得很好。 {html:html應該是{html:html} – CSH

+0

如果這對你有幫助,不要忘記標記爲答案。 – masterpreenz

0

我認爲這可能對其他人尋找這種東西來發布我最終做的事有用。

我用了從adeneo的偉大建議(上圖)中學到的東西,完全能夠做我需要做的事情。謝謝,adeneo

我應該採取從生物頁面經常在網站上改變球隊的個人資料信息和重用&重新安排它這需要總是可以同步在另一頁上。 因此,這裏是我結束了持續代碼:

$.get('Bios.html', function(html){ 
    var t_name = $('<div />', {html: html}).find('.t_name'); 
    var t_creds = $('<div />', {html: html}).find('.t_creds'); 
    var t_title = $('<div />', {html: html}).find('.t_title'); 
    var t_bio = $('<div />', {html: html}).find('.t_bio'); 
    var t_img = $('<img />', {html: html}).find('.t_img'); 
    var t_imgTn = $('<img />', {html: html}).find('.t_imgTn'); 

      var arrayLength = t_name.length; 

      for (var i = 0; i < arrayLength; i++) { 
       $('#name'+[i]).html(t_name[i]); 
       $('#creds'+[i]).html(t_creds[i]); 
       $('#title'+[i]).html(t_title[i]); 
       $('#bio'+[i]).html(t_bio[i]); 
       $('#bioImg'+[i]).html(t_img[i]); 
       $('#bioTn'+[i]).html(t_imgTn[i]); 
       } 
      }).fail(console.log); 

}); 

它的工作就像一個魅力:-)