Question

我希望我的JQuery根据我所在的页面选择一个导航链接 - 然后我希望它将其移动到列表的顶部。

这是导航栏的HTML：

<nav>
    <ul id=nav>
        <li><a href="index.php">Home</a></li>
        <li><a href="skillsets.php">Skillsets</a></li>
        <li><a href="gallery.php"><icon>Gallery</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

这是我用来尝试重新排序列表的JQuery：

var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
    var ul = $('nav').children('ul'),
        li = ul.children('li'),
        href = $('a[href*='+page+']');
        //move element to top
        ul.prepend(href.parent());
});

它不起作用，我认为它是因为href变量未正确设置。 alert(href);和alert(href.parent());不输出任何内容。

有什么想法吗？谢谢！

Answer 1

正如@ user3064914所说，你错过了'＃'，但你错过了引号：

<ul id = "nav">

Answer 2

var href = $('a[href*="'+page+'"]');

修改

此外，你可以用子选择器写一点：

var ul = $('nav > ul'), href = ul.find('> li a[href*="' + page + '"]'); ul.prepend(href.parent());

Answer 3

试试这个，它会起作用。

<script>
    var page = document.location.pathname.match(/[^\/]+$/)[0];    

    $(document).ready(function()
    {
            var href = $('a[href='+'"'+page+'"'+']').parent();
            var parent = $("#nav");    
            var childToMoveLast = href.remove();
            parent.prepend(childToMoveLast);

    });

 </script>

这是HTML

<nav>
    <ul id='nav'>
        <li><a href="index.php">Home</a></li>
        <li><a href="skillsets.php">Skillsets</a></li>
        <li><a href="gallery.php"><icon>Gallery</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

变量未正确设置;怎么修？

3 个答案: