-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. を使用$('ul')すると ul タグ要素を見つけることができますか? そうでない場合は、コードを に入れ、要素が含まれ$(function(){/**put your append code**/})ていることを確認してください。<body><ul>
  2. 追加された html がフォーマットされていることを確認しますか? に" li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>>" を入力する<ul>と、ブラウザに表示されるのが見えますか?
于 2012-05-21T04:48:25.803 に答える