Nhận hình ảnh bên trong một div?

Question

Nói rằng tôi có điều này:

<div class='container'> 
     <img src='image1' id='1' /> 
     <img src='image2' id='2' /> 
     ... 
</div> 
<div class='container'> 
</div> 

Bây giờ, tôi khi tôi bấm vào container, tôi muốn nhận được id của hình ảnh bên trong nó. Nếu vùng chứa không chứa hình ảnh, nó sẽ xuất hiện lỗi khi không có hình ảnh trong vùng chứa. Nếu không, tôi muốn có danh sách tất cả các id của hình ảnh bên trong.

Sử dụng jQuery, tôi có điều này:

$('.container').click(function() 
{ 
     var images = $(this).find('img'); 
     if(images[0] == null) { //no image found } 
     else 
     { 
      // No idea what to do here :P 
     } 
} 

ai đó có thể vui lòng giúp tôi ra ở đây (tôi có nghĩa bên trong else {} tuyên bố)? Cảm ơn :)

Answer 1

$(document).on("click", ".container", function(){ 
    var img = $(this).find("img"), // select images inside .container 
     len = img.length; // check if they exist 
    if(len > 0){ 
     // images found, get id 
     var attrID = img.first().attr("id"); // get id of first image 
    } else { 
     // images not found 
    } 
}); 

Example.

Để có được một mảng của id s của tất cả các hình ảnh trong container:

var arr = []; // create array 
if(len > 0){ 
    // images found, get id 
    img.each(function(){ // run this for each image 
     arr.push($(this).attr("id")); // push each image's id to the array 
    }); 
} else { 
    // images not found 
} 

Example.

Và tất nhiên, những loại một người mà tôi sẽ là nếu tôi không cung cấp cho bạn một ví dụ với JS tinh khiết:

var elems = [].slice.call(document.getElementsByClassName("container")); 
elems.forEach(function(elem){ 
    elem.onclick = function(){ 
     var arr = [], 
      imgs = [].slice.call(elem.getElementsByTagName("img")); 
     if(imgs.length){ 
      imgs.forEach(function(img){ 
       var attrID = img.id; 
       arr.push(attrID); 
      }); 
      alert(arr); 
     } else { 
      alert("No images found."); 
     } 
    }; 
}); 

Example. Một chút phức tạp hơn, và tôi vẫn khuyên bạn nên sử dụng jQuery vì nó xóa tất cả các sự kiện trình duyệt chuột qua sự điên rồ.

Answer 2

var images = $(this).find('img'); 
    if(images.length === 0) { 
     alert('no images found'); 
    } 
    else { 
     var ids = new Array; 
     images.each(function(){ 
      ids.push($(this).attr('id')); 
     }); 
     //ids now contains all the ids of img elements 
     console.log(ids); 
    } 

Answer 3

$('.container').click(function() 
{ 
var images = $('img',this); 
if($(images).length == 0) { 
     // No Image 
    } 
    else  { 
     var ids = ''; 
     $(images).each(function(){ 
      ids = $(this).attr('id) + ","; 
     }); 
     alert(ids); 
    } 
}