获取所选元素的第n个子元素的数量[重复]

Question

我试图弄清楚如何获取所选元素的第 n 个子元素的数量。例如，如果我有：

<parent>
  <child>a</child>
  <child>b</child>
  <child>c</child>
  <child>d</child>
  <child>e</child>
</parent>

如果我有：

$('child').click(function(){
  console.log($(this).nthChildOf('parent'));
});

如果我点击c，我喜欢控制台输出3。

感谢您的快速答复。我有一个补充问题。我发现如果我使用：

<parent>
  <child onclick="nthOf(this)">a</child>
  <child onclick="nthOf(this)">b</child>
  <child onclick="nthOf(this)">c</child>
  <child onclick="nthOf(this)">d</child>
  <child onclick="nthOf(this)">e</child>
</parent>

然后：

function nthOf(e) {
  console.log($('parent').index(e));
}

它总是输出 1。

如果我这样做：

function nthOf(e) {
  console.log($('parent').index($(e)));
}

它总是输出-1。

我该如何解决这个问题？

Answer 1

您可以使用.index() 获取其兄弟元素中的元素数。

$('child').click(function(){
  console.log($('child').index( this ) + 1);
});

DEMO

在回复您最近的评论时，我不知道您想要实现什么，但如果那是您想要的，我会给您：D，以便根据您对问题的更新。你的功能应该是...

function nthOf(e) {
  console.log($(e).parent().children().index(e) + 1);
}

DEMO