2

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

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

在每个 li 的悬停上，我想知道它在哪个孩子的 ul 中。即，在悬停“主页”时，它应该给孩子编号 0，而在悬停“博客”时，它应该给孩子编号 2。

4

5 回答 5

7

由于您已包含 jQuery 标签，因此我将发布基于 jQuery 的答案 - 如果您想要非 jQuery 答案，请告诉我：

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

仅供参考，您的标记是错误的，锚点应该在li标签内

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

$(".navigation-items-container a").hover(function(e) {
    var index = $(this).index();
});
于 2013-07-25T10:37:41.810 回答
1

由于您的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>

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

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

这是一个更好的例子

或者，我并不是说这更好，但您也可以使用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。

这是一个例子

于 2013-07-25T10:41:29.547 回答
0

尝试 索引（）

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

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

更多可能性

于 2013-07-25T10:36:41.690 回答
0

这可以帮助你

工作演示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>
于 2013-07-25T10:40:35.320 回答
0

尝试这个。

$('li').on('mouseover', function(){
    console.log($('ul li').index($(this)));
})
于 2013-07-25T10:40:58.403 回答