-1

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

4

4 回答 4

5

从 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/

于 2012-05-21T04:37:20.077 回答
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>");
});

例子

于 2012-05-21T05:01:45.587 回答
1 
$('ul').each(function() {
   $(this).append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175'/></li>");
});
于 2012-05-21T04:31:13.387 回答
1

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

  1. 你确定 using$('ul')可以找到 ul 标签元素吗？如果没有，请将您的代码放入$(function(){/**put your append code**/})，并确保<body>包含<ul>元素。
  2. 您确定附加的 html 已格式化吗？把 " li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>>" 放进去<ul>，然后在浏览器上看到 li 了吗？
于 2012-05-21T04:48:25.803 回答