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

How to get the number/ position of an element

本文关键字：位置 元素 何获取 获取      更新时间：2023-09-26

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

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

如何在 jQuery 中获取知道其 id 的标签的"位置"（表示第 n 个儿子）？例如：

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

意味着$("#c")是<ul>的第三个孩子。可能吗？

使用 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>

在这里摆弄

要查找单击元素的位置，请执行以下操作：

$('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>

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

例：

.HTML： 

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

j查询：

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

<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 ) );
相关文章：