获取jquery中元素的第n个子编号

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

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

就像你在飞翔一样

这是内容1

它应该触发输出为1

您可以使用jQuery来实现这一点。它告诉您给定元素相对于其同级元素的位置：

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

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

|

索引是基于0的，因此如果您正在寻找基于1的索引（例如，第一个索引是

1

，而不是

0

），只需在其中添加一个：

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

---

如果您没有使用jQuery，并且遇到了这个问题和答案（OP使用的是jQuery），那么不使用它也很简单<代码>第n个子项仅考虑元素，因此：

---

使用该方法的无参数版本查找图元相对于其同级的位置：

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

$('.container').children('p').hover(function() {
     var index = $(this).index() + 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+")");
});

应该有用

或者，如果您想知道悬停元素的索引：

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

---

请参见链接：@ArtemKoshelev这是一个错误的方法-这个问题是“给定一个元素，告诉我n”，而不是“给定n，告诉我元素”。@Alnitak哦，现在我明白了，这给我指出了一个错误的方法“我如何从其父容器类“container”中获取元素“p”的第n个子编号？”@Alnitak:谢谢，我想OP确实明确表示他们想要第一个

1

，不是吗？是的，可能是。我不知道。index（）。这对性能也没有什么影响：。所以我今天学到了一些东西：-）不仅仅是性能，还有内存效率。您的版本会为页面上的每个匹配元素创建一个新的闭包。我知道，但是如果您想将索引存储在某个地方，并且.index（）不存在，那么它可能会很有效。另一种选择是将索引存储在元素本身上。但这其实并不重要：我的选择肯定不是最优的：-）