附加升圖像

Question

說我有以下三個div的獨特ID的頁面上

<div id="product-id-001"></div> 
<div id="product-id-002"></div> 
<div id="product-id-003"></div> 

我需要什麼樣的代碼基於的標識添加以下圖像元素DIV？

<div id="product-id-001"> 

    <img src="images/product-id-001-1.jpg"></img> 
    <img src="images/product-id-001-2.jpg"></img> 
    <img src="images/product-id-001-3.jpg"></img> 

</div> 

<div id="product-id-002"> 

    <img src="images/product-id-002-1.jpg"></img> 
    <img src="images/product-id-002-2.jpg"></img> 
    <img src="images/product-id-002-3.jpg"></img> 

</div> 

<div id="product-id-003"> 

    <img src="images/product-id-003-1.jpg"></img> 
    <img src="images/product-id-003-2.jpg"></img> 
    <img src="images/product-id-003-3.jpg"></img> 

</div> 

感謝您的任何提示。

Answer 1

從jQuery docs：

「的.append（）方法插入指定的內容，因爲每個元素的jQuery的集合中的最後一個孩子」

所以：

$('#product-id-001").append('<img src="images/product-id-001-1.jpg"></img>'); 

etc ...

Answer 2

// Select all elements with an id beginning with product-id: 
var $productContainers = $('[id^=product-id]'); 
// Loop through the matched elements and append the images: 
$productContainers.each(function() { 
    var $this = $(this), 
     productId = $this.attr('id'), 
     numImages = 3, 
     extension = '.jpg'; 
    // Create and append the images based on the configuration above. Note that this 
    // assumes that each product have three valid images. 
    for (var i = 1; i <= numImages; i++) 
    { 
    var $image = $('<img alt="" />').attr('src', 'images/'+productId+'-'+i+extension); 
    $image.appendTo($this); 
    } 
}); 

Answer 3

$('div[id^=product]').each(function(index, elem) { 
    for(var i = 1; i < 4; i++) { 
     $('<img>', { 
      src: '/images/' + elem.id + i 
     }).appendTo(this); 
    } 
}); 

演示：http://www.jsfiddle.net/9S9Av/

（您需要螢火蟲或其他DOM檢查看到的結果）