通过类名称从jQuery获取外部文件的div

Question

Sorry if this has been answered before but I searched for hours trying to find how to do what I am trying to do. I know php would probably have an easier solution but php might not an option. Jquery is preferable although pure javascript would be great too.

I'm trying to get divs from an external file by class name. There are multiple divs using the same class name. I want to get all the div of that class put in an array that I can loop through in a later part of the script.

I'm trying keep the contents of the divs of this page synced up to the divs of a page of an external html file that will always be changing. But I'm not sure how best to do this.

I have had good results getting data from csv files into divs in other projects, no problem, but this one has me stymied.

I tried the following (for testing purposes, I was just logging to console). I have confirmed that the external file loads just fine. I can see it load in the Chrome Dev Tools. But the data never really seems to go anywhere after that.

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

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

});

I tried other variations but they were even messier and the script started pulling from classes of the current page instead of the external file. I could see the innerHTML of the current page showing up in the console log.

I'm sure there is a much better way that I'm not seeing.

I also tried something else I saw suggested online but this didn't works either. This gave me 'contents is undefined' error... not to surprised at that one.

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

Sorry if I am not asking this well. I don't often ask anything on these forums.

Thanks!

Answer 1

Assuming the URL is within the same origin, all you really have to do is

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

And note that elements would only be available within that callback functions scope, as it's asynchronous.

Also note the added fail handler, and make sure you open the console and check for errors.

Answer 2

I thought it might be useful to someone else searching for this sort of thing to post what I ended up doing.

I used what I learned from adeneo's great suggestion (above) and was totally able to do what I needed to do. Thanks, adeneo

I needed to take team profile info from a bio page that often changes on the site and reuse & rearrange it on another page which needed to always be synced up. So here is the code I ended up going with:

$.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);

});

It worked like a charm :-)