返回其容器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);
});

工作實例