Question

在ul标签之后我想在javascript中调用函数动态添加列表项在里面我想放置图片标签，如下所示。

<li> <img src="images/testpic" height="200px" width="200px" /> </li>

我在jquery中使用了.append（）方法，但是不起作用

<script type="text/javascript">
                '$('ul').append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>");
                '$('ul').append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>");
                '$('ul').append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>");

Answer 1

来自for循环

for ( var i = 0; i < 10; i++ ) {
    $("<li>",{ html:'<img src="http://placekitten.com/100/100?image='+i+'" />' })
        .appendTo("#images");   
}

来自图像数组

如果您要做的只是添加包含图片的列表项：

// You have a mention of i in your example, so I assume you are
// cycling over some sort of list - so I'll do the same
var images = [ 'http://placekitten.com/50/50', 
               'http://placekitten.com/50/50?image=2' ];

// You had some malformed markup in your code, the following keeps it simple
$.each( images, function( i, v ) {
    $("<li>", { html: '<img src="' + v + '" />' }).appendTo("#images");        
});

小提琴：http://jsfiddle.net/YwH7Z/

Answer 2

假设您的图片编号从0 ...

开始

$('ul').each(function(i) {
    $(this).append("<li><img src='thumbs/image"+i+".jpg' style='width:175px; height:175px; '/></li>");
});

Example

假设它从1开始..

$('ul').each(function(i) {
    $(this).append("<li><img src='thumbs/image"+(i+1)+".jpg' style='width:175px; height:175px; '/></li>");
});

Example

Answer 3

$('ul').each(function() {
   $(this).append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175'/></li>");
});

Answer 4

可以通过以下步骤修复错误：

您确定使用$('ul')可以找到ul标记元素吗？如果没有，请将您的代码放在$(function(){/**put your append code**/})中，并确保<body>包含<ul>元素。
您确定附加的html格式化了吗？将“li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>>”放入<ul>，然后看到li显示在浏览器上？

在<ul>中添加<li> </li>，其中包含<li> </li> </ul>内的<img/>标记

4 个答案:

来自for循环

来自图像数组