動的jQueryの

Question

[OK]を

を2つのファイルのパスを使用してリスト項目を作成します。私は私が

をしたいと思っする二つの異なるフォルダからリストを作成するjQueryの関数を作成しているこの私がすることができます

最善を説明しますそれで30枚までの画像をこのようなものにするでしょう

<div id="box"> 
    <ul> 
     <li><a href="images/test1.jpg"><img src="imagesthumbs/test1.jpg" alt="" /></a></li> 
     <li><a href="images/test2.jpg"><img src="imagesthumbs/test2.jpg" alt="" /></a></li> 
     <li><a href="images/test3.jpg"><img src="imagesthumbs/test3.jpg" alt="" /></a></li> 
    </ul> 
</div> 

これはこれを書くのが最も簡単な方法です。

おかげ

翔IDが「箱」とdiv内の最初のulのアイテムを見つけて、それにli要素の束を追加します。この関数を呼び出す

Answer 1

function addItems(num) { 
    var myList = $('#box > ul').first(); 
    for(var i = 1; i <= num; i++) { 
    myList.append('<li><a href="images/test' + i + '.jpg"><img src="imagesthumbs/test' + i + '.jpg" alt="" /></a></li>'); 
    } 
} 

。追加する要素の数がパラメータとして渡され、そしてあなたが合格「5」の場合は、取得します：

<li><a href="images/test1.jpg"><img src="imagesthumbs/test1.jpg" alt="" /></a></li> 
<li><a href="images/test2.jpg"><img src="imagesthumbs/test2.jpg" alt="" /></a></li> 
<li><a href="images/test3.jpg"><img src="imagesthumbs/test3.jpg" alt="" /></a></li> 
<li><a href="images/test4.jpg"><img src="imagesthumbs/test4.jpg" alt="" /></a></li> 
<li><a href="images/test5.jpg"><img src="imagesthumbs/test5.jpg" alt="" /></a></li> 

を...あなたのulに追加。

あなたのHTMLページにulを含むIDが「箱」とdivがあることを想定して、次のようなものでそれを呼び出すことができます。

<script> 
$(function() { // wrapping it this way ensures the page is loaded and the elements exist 
    addItems(5); 
}); 
</script> 

Answer 2

を使用すると、2つの異なるフォルダなどの2つの配列を考えてみましょう。これを試すことができます

var images = ["test1.jpg", "test2.jpg"]; 
var imagesthumbs = ["test1.jpg", "test2.jpg"]; 

var ul = $("<ul/>"); 
$.each(images, function(i, val){ 
    $("<li/>") 
    .append($("a", {href:"images/"+val}).append("img", {src:imagesthumbs[i], alt:""})) 
    .appendTp(ul); 
}); 

$("#box").append(ul);