jquery - 为多个元素动态添加背景图片

Question

我有一个要显示的图像列表。这些图像具有不同的宽度和高度，我想将它们全部放入一个 li 元素中，但是 li 元素对于每个子图像都应该具有相同的尺寸。

唯一的方法(以便图像适合标准大小的 li 框)是将图像指定为 li 元素的背景:

<ul>
      <li>
        <div></div>
        <span>Image1</span>
      </li>
      <li>
        <div></div>
        <span>Image2</span>
      </li> 
      <li>
        <div></div>
        <span>Image3</span>
      </li> 
      <li>
        <div></div>
        <span>Image4</span>
      </li>   
    ...and many more  
</ul> 

CSS:

ul li {       
        width: 75px;  
        height: 75px;
      }


ul li div{
        background-image: url('genereic path calculated in jquery');
        background-size: contain;  /*IMPORTANT THIS!*/
      }

所有图像的大小都应调整为 75 x 75...以便图像适合框 - 这就是我使用背景图像属性的原因...

基本上，我可以为每个图像执行此操作，但我有很多图像...所以我需要为每个列表项子 div 指定一个背景图像...

如何为每个新的 li>div 动态添加此背景图片？

例子:

$(function() {

    $( "li div" ).each(function() {
      $(this).css('background-image','url(images/' + 'imagetitle)');
  });
});

我怎样才能使这个动态，而不必为每个 div 指定背景图像...

谢谢!

Answer 1

首先，您将拥有包含图像的任何数据源，对吗？从中创建一个数组。

var liArray = { 'url1', 'url2', 'url3' };

然后试试for循环

for(i=0, i<liArray.length,i=i+1)
{
var odv = $.create("li");
odv.css('background-image','url(images/' + liArray[i])');
odv.appendTo($(ul));
}

这将动态创建您的图像。这是你的问题吗？

您必须注意您的绝对图像路径。我认为很明显，如果您在数组中传递绝对 URL，则括号内不需要图像文件夹。