javascript - 获取 DOM 中元素的当前位置

Question

这个问题已经有答案了:

Determining child index in it's parent [duplicate] (1 个回答)

已关闭 9 年前。

我需要找到 DOM 中元素的当前位置(最好是在单击时)。

使用 jQuery，如果我事先知道位置，我就能得到它:

$('li').get(3);

但有时我会依赖$(this)获取当前位置:

HTML:

http://jsfiddle.net/JBjeg/

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

JS:

 $('li').click(function(){

     // this does not work
    console.log($(this).get());

    // this does, but I won't know which is clicked
    console.log($('li').get(3));

});

获得当前职位的最佳方式是什么？最好是一个数字，这样我就可以在其他地方使用它。

Answer 1

您可以使用index获取点击元素的数量。

$(this).index();

索引将从0开始

$('li').click(function(){
     // this does not work
    console.log($(this).get());   
    // Will get index
    console.log($(this).index());
    // this does, but I won't know which is clicked
    console.log($('li').get(3)); 
});

更新

根据您在上一个答案中的评论

如果您想要与单击的li索引相关的图像，您可以尝试这个

var index = $(this).index(); // Get index
var img = $("img").get(index); // image selector may vary

Fiddle