Question

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

<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。即在徘徊“家”时，它应该作为0号儿童，并在徘徊“博客”时应该给2号儿童。

Answer 1

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

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

FYI您的标记错误，锚点应位于li标记内

您当前代码的版本（虽然应该更改）：

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

Answer 2

由于您的li元素位于a元素内，因此您应该使用此功能：

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

Here is a working example

当然，最好将a元素与li元素放在一起，如下所示：

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

那样li元素将是ul元素的直接子元素，那么你可以这样做：

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

Here is a better example

或者，我并不是说这更好，但您也可以使用data-*属性来存储您想要的值：

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

用这个：

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

如果需要，您可以指定不同的值，例如记录ID。

Here is an example

Answer 3

尝试index()

http://api.jquery.com/index/

  $(".navigation ul li").hover(function(e) {
   alert($(this).index());
});

More possiblities

Answer 4

这有助于你

工作演示http://jsfiddle.net/cse_tushar/7SmfR/

$(".navigation ul li").hover(function() {
    alert($(this).index('li'));
});

更正标记锚点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>

Answer 5

试试这个。

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

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

5 个答案: