当前第n个:父项的子项
Current nth:child of the parent
有没有办法找出我点击div时div
nth:child
?
$('#divStatus div').on('click', function() {
console.log($(this).parents().eq())
})
#divStatus div {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divStatus">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
是的,使用 jQuery 的 index
函数。 index
是基于 0 的,而:nth-child
是基于 1 的,所以你必须允许这一点。
$('#divStatus div').on('click', function() {
console.log($(this).index() + 1);
})
#divStatus div {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divStatus">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
使用.index()
函数获取当前点击的div的索引:
将从零开始,因此您需要向其添加 +1 以获得其正确的索引。
$(document).ready(function() {
$('#divStatus div').click(function() {
var index = $(this).index() + 1;
console.log(index);
});
});
#divStatus div {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="divStatus">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
为此
使用index()
函数。
看这里 JSFIDDLE
.HTML:
<div id="divStatus">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.CSS:
#divStatus div {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
JS代码:
$('#divStatus div').on('click', function() {
var nth = $(this).index() + 1;
console.log(nth)
})
index()
从0
开始,在您的情况下,您需要它从1
(nth-child(1)
)开始,这就是为什么您将1添加到index()
在此处阅读有关 index() 的更多信息
相关文章:
- 没有找到相关文章