子元素的位置在哪里?-jquery

Question

如何在JQuery中获取子元素position？我想得到警报中的数字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>

---

一如既往，您可能不需要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>

Answer 2

编辑：Phil的解决方案比好得多

获取父节点，获取父节点的所有子节点，然后在子节点数组中查找输入元素的索引。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>one</li>
<li onclick="findElem(this)">two</li>
<li>three</li>
</ul>
<script>
const findElem = (elem) => {
// Grab the parent element
const parent = $(elem).parent();
// Get array of all its children
const allChildren = $(parent).children();
// Turn it into a regular array, find the index of our elem, add 1 to it
const position = [...allChildren].indexOf(elem) + 1;
console.log(`The clicked element's position is ${position}`);
};
</script>