确定单击元素的父元素列表中的位置

Question

下面我有一个类似于简化HTML的元素列表。当其中一个图像被单击时，如果触发了某个JavaScript，那么单击的图像就会变成this.theImage。

现在我需要获取图像的位置；例如，如果单击了第一个图像，位置应该是1，如果单击了第二个，则应该是2，依此类推。

我可以使用var elements = $('.image-preview', '#gallery');，用image-preview类获取所有元素的列表，然后循环遍历这些元素，并将ID与图像匹配，但这看起来非常低效。

还有其他更有效的方法来完成这个任务吗？

<div id="gallery">
    <div class="image-preview">
        <img id="image-1" src="http://www.mysite.com/image1.jpg" />
    </div>
    <div class="image-preview">
        <img id="image-2" src="http://www.mysite.com/image2.jpg" />
    </div>
    <div class="image-preview">
        <img id="image-3" src="http://www.mysite.com/image3.jpg" />
    </div>
    <div class="image-preview">
        <img id="image-4" src="http://www.mysite.com/image4.jpg" />
    </div>
</div>

Answer 1

不确定我明白了，你可以拍到这样的图片

$('.image-preview img').on('click', function() {

});

然后得到你要做的索引

$('.image-preview img').on('click', function() {
    var index = $('.image-preview img').index(this);
});

请注意，它是基于零的

FIDDLE

Answer 2

你可以让Array.prototype.indexOf帮你做：

var gallery = document.getElementById('gallery'),
    els = [].slice.call(gallery.getElementsByTagName('img'));
gallery.onclick = function(e) {
    if(e.target.tagName.toLowerCase() !== 'img') return;
    var position = els.indexOf(e.target);
};

Demo