获取jquery元素的第n个子数

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:

下面是我通过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;

Thanks!

谢谢!

3 个解决方案

#1

You can use jQuery's index function for that. It tells you where the given element is relative to its siblings:

您可以使用jQuery的索引函数。它告诉你给定元素相对于它的兄弟元素的位置:

var index = $(this).index();

Live example | source

生活例子|来源

The indexes are 0-based, so if you're looking for a 1-based index (e.g., 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. nth-child only considers elements, so:

如果您没有使用jQuery，并且遇到了这个问题和答案(OP使用的是jQuery)，那么不使用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;
}

#2

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()的结果将是基于0的，而不是基于1的，因此是+ 1

#3

-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/

#1