-2

如何访问类中的元素imagecontainerbox？我想访问previewimage1,previewimage2和每一个这种类型的元素。

我试过nth-child了，但它不工作。它给了我预览 div 中的元素列表，而不是我想要的：

$('.imagecontainerbox:nth-child(0) img').attr(src);
$('preview').children('.imagecontainerbox:nth-child(0) img').attr(src);

HTML：

<div id="preview" style="">

  <span id="text0"></span>
  <div id="previewimage1" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="undefined" class="realimage" id="image1" height="undefined" width="undefined" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:NaNpx;z-index: 1;" onclick="removeimage(this)">
  </div>

  <span id="text1">   </span>
  <span id="text2">   </span>
  <span id="text3">   </span>

  <div id="previewimage4" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="tempimage/MosLake1365324410.jpg" class="realimage" id="image4" height="666.66666666667" width="500" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:490px;z-index: 1;" onclick="removeimage(this)">
  </div>
  <span id="text4">   </span>

  <div id="previewimage5" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="tempimage/MosLake1365324416.jpg" class="realimage" id="image5" height="375" width="500" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:490px;z-index: 1;" onclick="removeimage(this)">
  </div>
  <span id="text5">   </span>

  <div id="previewimage6" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="tempimage/MosLake1365324421.jpg" class="realimage" id="image6" height="666.66666666667" width="500" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:490px;z-index: 1;" onclick="removeimage(this)">
  </div>
  <span id="text6">   </span>

  <div id="previewimage7" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="tempimage/MosLake1365324426.jpg" class="realimage" id="image7" height="375" width="500" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:490px;z-index: 1;" onclick="removeimage(this)">
  </div>
  <span id="text7">   </span>

  <div id="previewimage8" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="tempimage/MosLake1365324431.jpg" class="realimage" id="image8" height="666.66666666667" width="500" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:490px;z-index: 1;" onclick="removeimage(this)">
  </div>
  <span id="text8">   </span>

  <div id="previewimage9" class="imagecontainerbox" style="position:relative;padding:5px;margin:5px;width:515px;">
    <img src="tempimage/MosLake1365324440.jpg" class="realimage" id="image9" height="666.66666666667" width="500" style="position:relative ;z-index:2px; border:5px solid #f8f8f8;border-radius:5px;padding:2px;">
    <img src="image/list/cancel1.png" style="float:right;padding:5px;position:absolute;top:10px;left:490px;z-index: 1;" onclick="removeimage(this)">
  </div>
  <span id="text9">  asd</span>
</div>

我正在使用这个 jQuery：

var image = $('#preview').children('.imagecontainerbox').length;
var imagesrc = $('#preview  .imagecontainerbox:nth-child('+image+') img').attr('src');

for(var i = 1; i <= image; i++) {

  if($(it).siblings('.realimage').attr('src') == $('.imagecontainerbox:nth-child('+i+')   img').attr('src')) {
    num = i;
    var p = $('#preview').children('.imagecontainerbox:nth-child('+i+')').attr('id');
  }
}
4

3 回答 3

0

只需使用带有选择器的字符串：

$("div[id^='previewimage'])

此选择器将选择具有指定属性的元素，其值恰好以给定字符串开头，previewimage在您的情况下。

于 2013-04-07T09:31:14.530 回答
0

尝试使用：

$('#preview > .imagecontainerbox').each(function(){
    var $container = $(this);
    var containerID = $container.attr('id');
})

这样你就可以获得该类的所有元素的 id。

于 2013-04-07T09:37:35.050 回答
0

在您的方法中，您可以使用或removeimage()获取包装imagecontainerbox元素的 IDparent()closest()

function removeimage( element){
   alert( $(element).parent().attr('id') );

       /* or */
    alert( $(element).closest('.imagecontainerbox').attr('id') );  

}

显示的大部分代码都没有什么意义，所以仍然不完全清楚你要做什么

于 2013-04-07T10:20:23.963 回答