Добавление восходящих изображений на основе идентификатора родительского div

Question

Скажем, у меня на странице были следующие три элемента с уникальными идентификаторами

<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

$('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, чтобы увидеть результат)

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

Из документов jQuery :

"Метод .append () вставляет указанное содержимое как последний дочерний элемент каждого элемента в коллекции jQuery"

Итак:

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

и т.д ...