Jquery 向多个元素动态添加背景图像

我有一个要显示的图像列表。图像有不同的宽度和高度，我想把它们都放在一个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> 

所有图像的大小都应该调整到75乘75…这样图像就适合这个盒子-这就是为什么我使用背景图像属性

基本上，我可以为每个图像这样做，但我有很多图像…所以我需要为每个列表项子div指定一个背景图像

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

例如：

$(function() {

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

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

---

谢谢大家!

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

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

---

对于（i=0，i个人而言，我会将CSS放在CSS文件中

.addBackground {
   background: url(./path_to_my_image.png);
}

然后，在使用jQuery时

$("span").each(function() {
    $(this).addClass("addBackground");
});

PHP代码：

<?php


function createGallery() {
if ($pwd = opendir('./images/')) {

    /* Loop over the directory. */
    while (false !== ($file = readdir($pwd))) {
        $file_name = pathinfo($file);
        $fn = $file_name['filename'];

            if ($file_name['extension'] == "png") {

                doCSS($fn, $file);

            }

    }
    closedir($pwd);
}
}

function doCSS($fn, $image) {
$cssFile = "./gallery.css";

if (file_exists($cssFile)) {
    // Attempt to open for append
    $fh = fopen($cssFile, "a") or die("Error opening file.");
} else {
    // Attempt to create
    $fh = fopen($cssFile, "w") or die("Error opening file.");
}

        $string = "#".$fn." { background: url(./images/".$image."); } ";
    // Write to file
    fwrite($fh, $string);


fclose($fh);    
}

createGallery();

?>

就我个人而言，我将编写一个用于定位div和固定维度的类，并在主页CSS文件中包含以下内容：-

.dimensions {
    position: relative;
    width: 75px; height: 75px; display: block;
}

我也会使用PHP在页面上创建标记，而不是JS，因为您正在遍历目录来创建CSS文件。希望这会有所帮助。
这将完全取决于您是否有图像文件名数组，或者它们是否符合类似
image-01.jpg
，
image-02.jpg
等模式，或者也许你是通过AJAX获取的…@Blazemonger：我也同意blaze的说法，你在一个文件夹中有一个数组或一系列图像，比如img01.jpg、img02.jpg……等等。谢谢。但是我如何动态填充图像的路径呢？这样，我就必须指定不同的.addbackground类……每个图像都有一个diff backgr您是否正在尝试使用未排序的列表创建图像库，并将每个列表项>div作为缩略图？基本上，我认为您可以硬编码CSS文件，并在DOM ready应用样式调整上述代码，或者使用服务器端语言（如PHP）对图像文件夹中的所有文件编制索引并输出CSS文件，即ay每次向目录中添加一个文件时，它都会创建一个新类。如果您认为这是一个好方法，我可以提供一些代码。是的，没错。li项应同时包含div（缩略图）和span（作为图像描述的文本）…如果您能提供帮助，我将不胜感激。您可能需要使用$（odv）语句选择odv变量。我现在不确定它在JQ上下文中是否仍然是一个变量。请尝试-如果您有任何问题，请发布它们。
#photo1 { background: url(./images/photo1.png); } #photo3 { background: url(./images/photo3.png); } #photo3menu_OLD { background: url(./images/photo3menu_OLD.png); } #photo1small { background: url(./images/photo1small.png); } #photo3menu { background: url(./images/photo3menu.png); } #photo3small { background: url(./images/photo3small.png); } #photo4 { background: url(./images/photo4.png); } #photo4details { background: url(./images/photo4details.png); } 

.dimensions {
    position: relative;
    width: 75px; height: 75px; display: block;
}