用图像填充ul li

filling ul li with images

本文关键字：li ul 填充 图像      更新时间：2023-09-26

我对使用填充ul li有问题

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>

我需要使用javascript放入所有li

但是请不要使用这个例子：

$("ul").html("<li><img src='something' /></li>");

因为在javascript加载之前我需要这个ul-li。

我想在javascript之后看起来像：

<ul>
    <li><img src='something' /></li>
    <li><img src='something' /></li>
    <li><img src='something' /></li>
    <li><img src='something' /></li>
</ul>

我的问题是：如何用图像填充所有的ul li。

javascript与for循环配合使用。因为也许我有这个变体：

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>

4 li和只有2个图像，并且看起来像这样：

<ul>
    <li><img src='something' /></li>
    <li><img src='something' /></li>
    <li></li>
    <li></li>
</ul>

我希望我能解释一下。无论如何，谢谢

我的php代码：

<?php
session_start();
include_once('connect.php');
$path = "../uploads/";
$i = -1;
foreach($_FILES['files']['name'] as $key => $name) {
    $i++;
    $image_info = getimagesize($_FILES['files']['tmp_name'][$key]);
    $image_width = $image_info[0];
    $image_height = $image_info[1];
    if($image_width > $image_height) {
        $height = $image_height;
        $width = $height;
    } else if($image_width < $image_height) {
        $width = $image_width;
        $height = $width;
    } else {
        $width = $image_width;
        $height = $image_height;
    }
    $canvas = imagecreatetruecolor($width, $height);
    $current_image = imagecreatefromjpeg($_FILES['files']['tmp_name'][$key]);
    imagecopy($canvas, $current_image, 0, 0, ($image_width/2)-($width/2), ($image_height/2)-($height/2), $width, $height);
    imagejpeg($canvas, $path.'cropped_'.$name, 100);

    echo 
    "
        <script type='text/javascript'>
            var _img = document.createElement('img');
            _img.src = 'uploads/".$name."';
            $('.image-upload ul li:nth(".$i.")').append(_img);
        </script>
    ";
}
?>

之前：https://i.stack.imgur.com/vnfZm.png

之后https://i.stack.imgur.com/Ve1CC.png

var _ul=document.getElementByTagName('ul');
var _list=_ul.getElementsByTagName('li');
for (var i=0;i<=_list.length;i++)
  {
    var _img=document.createElement('img');
    _img.src="something";
    _img.id="foo"+i;
    _list[i].appendChild(_img);
  }

您不必使用循环来用图像填充所有li标记。使用，

$("li").append("<img src='something' />");

如果您想为前2个li标签添加图像，请像这样使用

$("li:lt(2)").append("<img src='something' />");
相关文章：