Javascript 如何知道Ul元素的确切子元素数？

我是网络开发的新手。不确定这是不是一个愚蠢的问题

<nav class="navigation">
    <ul class="navigation-items-container">
      <a href="#"><li class="navigation-items">Home</li></a>
      <a href="#"><li class="navigation-items">about</li></a>
      <a href="#"><li class="navigation-items">blog</li></a>
      <a href="#"><li class="navigation-items">contacts</li></a>
    </ul>
/nav>

/导航>

在悬停的每一个李我想知道它在哪个孩子的ul数。 即 悬停在“Home”上时，它应该给孩子编号0；悬停在“blog”上时，它应该给孩子编号2。

试试看

---

既然您已经包含了jQuery标签，我将发布一个基于jQuery的答案-如果您想要一个非jQuery的答案，请告诉我：

$(".navigation-items-container li").hover(function(e) {
    var index = $(this).index();
});

仅供参考，您的标记是错误的，锚点应该位于

li

标记内

<nav class="navigation">
    <ul class="navigation-items-container">
        <li class="navigation-items">
            <a href="#">Home</a>
        </li>
        <li class="navigation-items">
            <a href="#">about</a>
        </li>
        <li class="navigation-items">
            <a href="#">blog</a>
        </li>
        <li class="navigation-items">
            <a href="#">contacts</a>
        </li>
</nav>

当前代码的版本（尽管应该更改）：

这对你有帮助

工作演示

更正标记锚（

a

）标记应包含在

li

标记中

<nav class="navigation">
    <ul class="navigation-items-container">
        <li class="navigation-items">
            <a href="#">Home</a>
        </li>
        <li class="navigation-items">
            <a href="#">about</a>
        </li>
        <li class="navigation-items">
            <a href="#">blog</a>
        </li>
        <li class="navigation-items">
            <a href="#">contacts</a>
        </li>
</nav>

试试这个

$('li').on('mouseover', function(){
    console.log($('ul li').index($(this)));
})

---

由于您的

li

元素位于

a

元素中，因此您应该使用：

$(".navigation li").hover(function(){
    var index = $(".navigation li").index(this);
    alert(index);
});

---

当然，最好将

a

元素与

li

元素组合在一起，如下所示：

<li class="navigation-items"><a href="#">Home</a></li>

---

或者，我并不是说这更好，但您也可以使用

data-*

属性来存储您想要的值：

<li class="navigation-items" data-myindex="0"><a href="#">Home</a></li>

这样做的好处是，如果需要，可以指定不同的值，例如记录ID

---

您的HTML无效。锚应该由li封闭，而不是反过来。谢谢大家。我会更正HTML。虽然我同意OP应该更改它们的标记，但这个答案在技术上是不正确的。@musefan我添加了一个新版本，使用不同的选择器来匹配它们当前的标记

<li class="navigation-items"><a href="#">Home</a></li>

$(".navigation li").hover(function(){
    var index = $(this).index();
    alert(index);
});

<li class="navigation-items" data-myindex="0"><a href="#">Home</a></li>

$(".navigation li").hover(function(){
    var index = $(this).data("myindex");
    alert(index);
});