javascript - 如何获取动态创建的元素宽度并对其应用样式？

Question

我正在动态创建一个 li 元素，如下所示:

$(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>');
})

但是我想计算 li 的宽度，并且我需要对其应用一些样式 - 我该怎么做？如果我通过 css 方法添加样式，它不适用于动态创建的元素...

请帮助我获取动态元素的宽度以及如何将样式应用到其中？

我知道我们可以使用 live 功能，但我什至无法做到这一点..

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);
})

这是一个人为的示例。在附加外部创建链接，以便您可以直接访问它并利用innerWidth() 或outerWidth() 来获取宽度值。然后只需引用您创建的项目的 css 函数即可。在此示例中，我仅获取当前宽度并加 100。