Question

I am creating an li element dynamically like this:

$(data).find('slide').each(function(numSlide){
  var slideLink = $(this).attr('link');
  var slideimage = $(this).children('slideimage').text();
  var slidedesc = $(this).children('slidedesc').text();

  $('.slider ul').append('<li><a href="'+slideLink+'"><img src="'+root+"images/top-slider-image/"+slideimage+'" alt="welcome to Burger Davis Blog" /></a><div class="note">'+slidedesc+'</div></li>');
})

But I’d like to calculate the width of the li, and I need to apply some style to it — how can I do that? If I add styles via the css method, it does not work for dynamically created elements…

Please help me to get dynamic elements’ width and how to apply styles into that?

I know we can use the live function, but I can’t get even by that..

Answer 1

$(data).find('slide').each(function(numSlide){
  var slideLink = $(this).attr('link');
  var slideimage = $(this).children('slideimage').text();
  var slidedesc = $(this).children('slidedesc').text();
  var li = $('<li><a href="'+slideLink+'"><img src="'+root+"images/top-slider-image/"+slideimage+'" alt="welcome to Burger Davis Blog" /></a><div class="note">'+slidedesc+'</div></li>');
  $('.slider ul').append(li);
  var w = li.outerWidth();
  li.css('width', w + 100);
})

This is a contrived sample. create the link outside the append so you can access it directly and utilize either innerWidth() or outerWidth() to get the width value. Then just reference the css function of the item you create. In this example I just take the current width and add 100 to it.