Question

当我点击li时，我需要一个javascript来显示第n个孩子的号码。例如，如果我点击＆＃34; apple＆＃34; console.log显示我＆＃34; 2＆＃34;。我想把第n个孩子的号码变成一个变量。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            li:nth-child(1) b {color: #eeaa33;}
            li:nth-child(2) b {color: #0000ff;}
            li:nth-child(3) b {color: #ff3300;}
        </style>
    </head>
    <body>
        <ul class="menu">
            <li><b>apple</b></li>
            <li><b>watermelon</b></li>
            <li><b>blueberry</b></li>   
        </ul>
        <script>
    //I need a javascript to show me the nth-child number when I click a li. 
        //For example if I click "apple" console.log show me "2".
        // I want to turn nth-child number into a variable.
        </script>
    </body>
</html>

Answer 1

如果你可以使用jQuery， .prevAll() 会有所帮助。将单击处理程序分配给“li”，在单击的元素上调用.prevAll（），并获取结果集的长度以获取单击元素之前的兄弟节点数。加1，使第一个li的n = 1。

$("li").click(function(){  
    var n = $(this).prevAll().length + 1;  
    console.log(n);  
});

单击时显示第n个子编号 - 将第n个子编号转换为变量

1 个答案: