返回其容器div中的项目点击顺序/位置

Question

我试图返回，console.log（）; 单击的项目及其位置。 所有容器都具有与本示例相同的类名：

<div class="container"> 
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="container"> 
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="container"> 
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

这是返回点击项的JavaScript：

$(".container .item").click(function(){
var position = "? not sure what to do here";
console.log(this + " position: "+position);
});
</script>

因此，如果您单击第二个容器内的第三个div，则它应返回：container：2 item：3，而无需更改DOM（在不更改其原始代码的情况下跟踪网站的点击）。）谢谢！

Answer 1

$（this）.index（）将返回当前位置。 $（this）.parent（）。index（）将返回容器div索引。

$(".container .item").click(function(elm){

var containerIndex= $(this).parent().index();
var itemIndex = $(this).index();
console.log( 'container:' +containerIndex + ' ' + 'item:' +itemIndex);
});

在这里你可以看到它

Answer 2

使用Jquery函数.index（）将返回元素的位置整数。

描述：从匹配的元素中搜索给定的元素。

var position = $(this).index();

希望这可以帮助。

 $(".container .item").click(function(){ var position = $(this).index(); console.log(this + " position: "+position); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item">0</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="container"> <div class="item">0</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="container"> <div class="item">0</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> 

Answer 3

您可以使用index()方法获取当前元素在其容器中的位置。 然后，您可以从item()使用closest()获取相关的.container 。 尝试这个：

$(".container .item").click(function () {
    var containerIndex = $(this).closest('.container').index();
    var itemIndex = $(this).index();
    console.log('container: ' + containerIndex, 'item: ' + itemIndex);
});

工作实例