Получить изображение, связанное внутри div?

Question

Скажем, у меня есть это:

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

Теперь я, когда я нажимаю на контейнере, я хочу, чтобы получить идентификатор изображения внутри него. Если контейнер не содержит изображения, он должен вывести сообщение об ошибке в контейнере. В противном случае я хотел бы получить список всех идентификаторов изображений внутри.

Использование JQuery, у меня есть это:

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

может кто-то пожалуйста, помогите мне здесь (я имею в виду внутри еще {} заявление)? Спасибо :)

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.

Чтобы получить массив id с всех изображений в контейнере:

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.

И, конечно же, какой вид человека был бы я, если бы я не дал вам пример с чистым JS:

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. Немного сложнее, и я по-прежнему рекомендую использовать jQuery, поскольку он очищает все безумие событий мыши в браузере.

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); 
    } 
}