javascript - 根据父 div 的 id 添加升序图像

Question

假设我在一个页面上有以下三个具有唯一 ID 的 div

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

根据 div 的 id 添加以下图像元素需要什么代码？

<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

$('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/

(您需要 Firebug 或其他 DOM 检查器才能看到结果)