Question

如何访问课程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');
  }
}

Answer 1

只需使用strarts with选择器：

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

此选择器将选择具有指定属性的元素，其值的开头与给定字符串完全相同，在您的情况下为previewimage。

Answer 2

尝试使用：

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

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

Answer 3

在removeimage()方法中，您可以使用imagecontainerbox或parent()

获取包装closest()元素的ID

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

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

}

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

如何访问类中的所有元素？

3 个答案: