jQuery 获取jquery中元素的第n个子代号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10547261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get the nth-child number of an element in jquery
提问by PHP Noob
I have a class of multiple 'DIV' elements and inside it are list of 'p' elements. See below:
我有一类多个“DIV”元素，其中包含“p”元素列表。见下文：
<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；
回答by T.J. Crowder
You can use jQuery's indexfunctionfor that. It tells you where the given element is relative to its siblings:
您可以为此使用 jQuery 的index函数。它告诉你给定元素相对于它的兄弟元素的位置：
var index = $(this).index();
The indexes are 0-based, so if you're looking for a 1-based index (e.g., where the first one is 1rather 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. nth-childonly considers elements, so:
如果您没有使用 jQuery 并且遇到了这个问题和答案（OP 使用的是 jQuery），那么没有它也很简单。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;
}
回答by Alnitak
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
回答by Willem Mulder
$('.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);
}
