[英]get the nth-child number of an element in jquery
I have a class of multiple 'DIV' elements and inside it are list of 'p' elements. 我有一类多个'DIV'元素,里面是'p'元素列表。 See below:
见下文:
<div class="container">
<p>This is content 1</p>
<p>This is content 2</p>
<p>This is content 3</p>
</div>
<div class="container">
<p>This is content 1</p>
<p>This is content 2</p>
<p>This is content 3</p>
</div>
Here's my jQuery code on calling the 'p' elements through hover: 这是我通过悬停调用'p'元素的jQuery代码:
$('.container').children('p').hover(function(){
//get the nth child of p from parent class 'container'
});
How can I get the nth child number of the element 'p' from its parent container class 'container'? 如何从其父容器类'container'中获取元素'p'的第n个子编号?
Like if you hover 就像你盘旋一样
This is content 1
这是内容1
it should trigger output as 1; 它应该触发输出为1;
You can use jQuery's index
function for that. 你可以使用jQuery的
index
函数 。 It tells you where the given element is relative to its siblings: 它告诉您给定元素相对于其兄弟姐妹的位置:
var index = $(this).index();
Live example | 实例 | source
资源
The indexes are 0-based, so if you're looking for a 1-based index (eg, where the first one is 1
rather than 0
), just add one to it: 索引是从0开始的,所以如果你正在寻找一个基于1的索引(例如,第一个索引是
1
而不是0
),只需添加一个索引:
var index = $(this).index() + 1;
If you're not using jQuery and came across this question and answer (the OP was using jQuery), this is also quite simple to do without it. 如果你没有使用jQuery并且遇到了这个问题和答案(OP使用的是jQuery),没有它也很简单。
nth-child
only considers elements , so: nth-child
只考虑元素 ,所以:
function findChildIndex(node) {
var index = 1; // nth-child starts with 1 = first child
// (You could argue that you should throw an exception here if the
// `node` passed in is not an element [e.g., is a text node etc.]
// or null.)
while (node.previousSibling) {
node = node.previousSibling;
if (node && node.nodeType === 1) { // 1 = element
++index;
}
}
return index;
}
Use the parameter-less version of the .index()
method to find the position of the element relative to its siblings: 使用
.index()
方法的无参数版本来查找元素相对于其兄弟的位置:
$('.container').children('p').hover(function() {
var index = $(this).index() + 1;
});
Note that the result of .index()
will be zero-based, not one-based, hence the + 1
请注意,
.index()
的结果将从零开始,而不是从一开始,因此为+ 1
$('.container').children('p').hover(function(){
//get the nth child of p from parent class 'container'
var n = 1;
var child = $(this).parent().find("p:eq("+n+")");
});
Should work! 应该管用!
Or if you want to know the index of the hovered element: 或者,如果您想知道悬停元素的索引:
$('.container').children('p').each(function(index,element) {
// use closure to retain index
$(element).hover(function(index){
return function() { alert(index); }
}(index);
}
See http://api.jquery.com/each/ 见http://api.jquery.com/each/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.