怎样用Jquery定位特定div里的某个id项

Question

网页里的pet_2,pet_3··是克隆pet_1动态创建的，里面有一部分是上传图片后预览的功能也复制过来了。但是现在只有第一个pet_1的能预览。
网页结构如图
预览部分的js代码：
function previewImage(file)
{
  var MAXWIDTH  = 400;
  var MAXHEIGHT = 280;
  var div = document.getElementById('preview');  //这里只能找到第一个
  if (file.files && file.files[0])
  {
   div.innerHTML = '<img id=imghead>';
   var img = document.getElementById('imghead');
   img.onload = function(){
     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
     img.width = rect.width;
     img.height = rect.height;
     img.style.marginLeft = rect.left+'px';
     img.style.marginTop = rect.top+'px';
   }
   var reader = new FileReader();
   reader.onload = function(evt){img.src = evt.target.result;}
   reader.readAsDataURL(file.files[0]);
  }
  else
  {
    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
    file.select();
    var src = document.selection.createRange().text;
    div.innerHTML = '<img id=imghead>';
    var img = document.getElementById('imghead');
    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
    status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
    div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
  }
}function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if( rateWidth > rateHeight )
{
param.width =  maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}

param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}因为ID是一样的，都是preview，只能找到第一个。有没有办法找到pet_i里的preview，改成preview_i？
       
或者我的想法是有没有类似下面这样的方法（只是说像这种思路，代码好像不能这样写），
var divpet = document.getElementById('pet_'+i);  //i=1,2,3···
var divpreview = divpet.getElementById('preview');
或者用jquery怎么写？ 

Answer 1

ID是一样的？页面上ID是唯一的。

Answer 2

这是后台的问题。生成的时候应该生成不同的ID。
返回多个相同ID的对象，是明显非常错误且没有任何合适理由的。

Answer 3

$('div.pet_' + i + ' > #preview') 

Answer 4

$()可以传两个参数的，一般我们都是传入一个$('#preview'),那么jquery会默认在document中找id为preview的元素，如果你想在某一个特定的元素中找的话，指定某个外层容器即可。
$('#preview', $('#pet_1'))