javascript - 子元素的位置在哪里？ - 查询

Question

如何在 JQuery 中获取子元素 position？我想得到alert中的数字2，因为它是老二!

function where_am_i(element) {
  alert("your position is:" + $(element).position_element());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>one</li>
  <li onclick="where_am_i(this)">two</li>
  <li>three</li>
</ul>

Answer 1

使用 jQuery 的 .index()方法。请注意，它返回一个从零开始的索引，因此您需要加一才能获得所需的值。

$("ul li").on("click", function() {
  alert(`your position is: ${$(this).index() + 1}`)
})

li { margin: 1rem auto; cursor: pointer; }
li:hover { text-decoration: underline; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

---

一如既往，you might not need jQuery

document.querySelector("ul").addEventListener("click", e => {
  const target = e.target.closest("li")
  if (target) { // clicked on an <li>
    const siblings = Array.from(target.parentElement.children)
    const position = siblings.indexOf(target) + 1
    alert(`your position is: ${position}`)
  }
})

li { margin: 1rem auto; cursor: pointer; }
li:hover { text-decoration: underline; }

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>