加 <li></li> 内 <ul> 动态地包含 <img> 里面的标签 <li>

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

例

假设它从1开始。

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

例

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显示在浏览器？

加 <li></li> 内 <ul> 动态地包含 <img> 里面的标签 <li>

问题描述

4 个解决方案

解决方案1
4 已采纳 2012-05-21 04:37:20

从for循环

从图像阵列

解决方案2
2 2012-05-21 05:01:45

解决方案3
1 2012-05-21 04:31:13

解决方案4
1 2012-05-21 04:48:25

加 <li></li> 内 <ul> 动态地包含 <img> 里面的标签 <li>

问题描述

4 个解决方案

解决方案1 4 已采纳 2012-05-21 04:37:20

从for循环

从图像阵列

解决方案2 2 2012-05-21 05:01:45

解决方案3 1 2012-05-21 04:31:13

解决方案4 1 2012-05-21 04:48:25

解决方案1
4 已采纳 2012-05-21 04:37:20

解决方案2
2 2012-05-21 05:01:45

解决方案3
1 2012-05-21 04:31:13

解决方案4
1 2012-05-21 04:48:25