jquery – 在div中获取图像属性？

说我有这个：

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

现在,当我点击容器时,我想获取其中的图像的ID.如果容器不包含图像,则应该弹出错误,表示容器中没有图像.否则,我想获得里面图像的所有ID的列表.

使用jQuery,我有这个：

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

有人可以请你帮我(我的意思是在其他{}声明里面)？谢谢 ：)

解决方法

$(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,因为它清除了所有跨浏览器鼠标事件的疯狂.