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

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

2 个答案: