如何訪問課堂中的所有元素？

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

在你removeimage()方法，你可以使用parent()或closest()

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

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

} 

大多數顯示的代碼變得毫無意義所以仍然不完全清楚你正在嘗試做

拿到包裹 imagecontainerbox元素的ID

Answer 2

只需使用strarts with選擇：

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

此選擇器將選擇具有指定屬性的元素，該值的值始終與給定字符串（在您的情況下爲previewimage）開始。

Answer 3

嘗試使用：

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

這樣ü可以得到這個類的所有元素的ID。