수업 시간에 모든 요소에 액세스하는 방법은 무엇입니까?

Question

클래스 imagecontainerbox의 요소에 액세스하려면 어떻게해야합니까? previewimage1, previewimage2 및 모든 유형의 요소에 액세스하고 싶습니다.

나는 nth-child을 시도했지만 작동하지 않습니다.

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

HTML : :이 jQuery를 사용하고

<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>  

:

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

당신의 코드의 대부분은 그래서 여전히

을 뭘 하려는지 완전히 명확하지 거의 의미가 parent() 또는 closest()

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

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

} 

를 사용하여 포장 imagecontainerbox 요소의 ID를 얻을 수 있습니다

Answer 2

을 그냥 strarts with 선택기를 사용 내가 원하지 DIV 무엇을 나에게 미리보기에서 요소의 목록을 제공 :

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

이 선택자는 주어진 문자열로 정확히 시작하는 값으로 지정된 속성을 갖는 요소를 선택합니다.이 경우에는 previewimage입니다. 사용

Answer 3

보십시오 : u는 그 클래스의 모든 요소의 ID를 얻을 수 있습니다

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

이 방법. 당신의 removeimage() 방법에서