返回項目點擊順序/位置在其容器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

$（本）的.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); 
}); 

you can see it here

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); 
}); 

Working example