Question

在我的HTML页面中，我有这个列表

<ul>
  <li id=a></li>
  <li id=b></li>
  <li id=c></li>
  ...
</ul>

如何在jQuery中获取标识知道其id的“位置”（意为第n个儿子）？例如：

$("#c").position() = 3

表示$("#c")是<ul>的第3个孩子。有可能吗？

Answer 1

使用index()从匹配元素集中查找元素的位置（从0 开始）。

试试这个：

$('li').on('click', function() {
  alert($('#c').index() + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li id=a>Click here!</li>
  <li id=b>Click here!</li>
  <li id=c>Click here!</li>
</ul>

Fiddle here

要查找被点击元素的位置：

$('li').on('click', function() {
  alert($(this).index() + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li id=a>Click here!</li>
  <li id=b>Click here!</li>
  <li id=c>Click here!</li>
</ul>

Answer 2

如果你想知道父项子项的位置，那么你必须使用jQuery的.index()函数。

示例：

HTML：

<ul> <li>A</li> <li>B</li> <li>C</li> </ul>

<强> jQuery的：

$('li').on('click', function() { index = $(this).index(); position = index + 1; alert(position);//Here is the position of child ul. });

Answer 3

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

var listItem = document.getElementById( "bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

如何获取元素的数量/位置

3 个答案: