javascript - jQuery dynamic selector returning undefined -


i'm sure have overlooked something, confounding me.

starting html:

<div id="col-header-1"> ... </div> 

using instafeed (js plugin) instagram images - working fine. outputs following correctly (within col-header-1):

<div class="instagram-headers" data-highres="http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg"></div> 

this not work, url returns undefined:

function replacecssbackgroundwithimage(target){   var url = $('#' + target + ' > .instagram-headers').attr('data-highres');   $('#' + target).css('background-image','url(' + url + ')'); } 

result

<div style="background-image: url('undefined');" id="col-header-1"> 

so gets target correctly.

stepping through in (firefox's) console yields correct result:

target = 'col-header-1' //=>"col-header-1"  var url = $('#' + target + ' > .instagram-headers').attr('data-highres'); //=> undefined  url //=> "http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg"  $('#' + target).css('background-image','url(' + url + ')'); //=> [object object] 

result

<div style="background-image: url("http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg");" id="col-header-1"> 

im @ loss, appreciated,

thanks!

update: instafeed constructor

function getmultiplefeeds(targets){ var feeds = []; var opts = {}; (var i=0,len=targets.length;i<len;i++){ if (targets[i].match('header')){     opts = {         tagname: "tag",         target: targets[i],         limit: '1',         get: 'tagged',         user:'user',         clientid:'clientid',         template:'<div class="instagram-headers" data-highres="{{image}}"></div>',         usehttp:true,         before: replacecssbackgroundwithimage(targets[i]),     }; ... feeds.push(new instafeed(opts));   } return feeds; }  var myfeeds = getmultiplefeeds(['col-header-1','col-header-2','col-header-3','instafeed','banner']);  for(var i=0, len=myfeeds.length; < len; i++) {   myfeeds[i].run(); } 

from looking @ instafeed documentation, want call replacecssbackgroundwithimagemethod in after callback, rather before callback. try changing before after :

function getmultiplefeeds(targets){ var feeds = []; var opts = {}; (var i=0,len=targets.length;i<len;i++){ if (targets[i].match('header')){ opts = {     tagname: "tag",     target: targets[i],     limit: '1',     get: 'tagged',     user:'user',     clientid:'clientid',     template:'<div class="instagram-headers" data-highres="{{image}}"></div>',     usehttp:true,     after: replacecssbackgroundwithimage(targets[i]), }; ... feeds.push(new instafeed(opts));   } return feeds; }  var myfeeds = getmultiplefeeds(['col-header-1','col-header-2','col-header-3','instafeed','banner']);  for(var i=0, len=myfeeds.length; < len; i++) {   myfeeds[i].run(); } 

the reason being element trying target hasn't been added dom @ point trying access it, returning undefined.


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -