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

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

在其容器div中返回项目单击顺序/位置

3 个答案: