35

我有一个包含多个“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>

这是我通过悬停调用“p”元素的 jQuery 代码:

$('.container').children('p').hover(function(){
    //get the nth child of p from parent class 'container'
});

如何从其父容器类“容器”中获取元素“p”的第 n 个子编号?

就像如果你悬停

这是内容1

它应该触发输出为1;

4

3 回答 3

82

您可以为此使用 jQuery 的index功能。它告诉你给定元素相对于它的兄弟元素的位置:

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

实例| 来源

索引是基于 0 的,因此如果您正在寻找基于 1 的索引(例如,第一个索引是1而不是0),只需向其添加一个:

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

如果您没有使用 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;
}
于 2012-05-11T07:33:12.023 回答
8

使用该.index()方法的无参数版本来查找元素相对于其兄弟元素的位置:

$('.container').children('p').hover(function() {
     var index = $(this).index() + 1;
});

请注意,结果.index()将是从零开始的,而不是从一开始的,因此+ 1

于 2012-05-11T07:33:39.403 回答
0
$('.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+")");
});

应该管用!

或者,如果您想知道悬停元素的索引:

$('.container').children('p').each(function(index,element) {
    // use closure to retain index
    $(element).hover(function(index){
        return function() { alert(index); }
    }(index);
}

http://api.jquery.com/each/

于 2012-05-11T07:34:09.633 回答