无法弄清楚如何正确调用元素

Question

我有一些JQuery，它通过重新排序和添加指向导航的链接来做大量工作，但是重要的是，它应该在页面加载时隐藏除第一个链接（通过导航）以外的所有导航链接。 循环的工作方式是隐藏所有不具有class属性的链接： class="top" 。 除了var page = ""时，这工作正常。 从代码中可以看到，我试图选择链接到“ index.php”的nav链接，并在var page = ""时向其添加class="top"属性。 我不知道这是否正确，但是似乎有些东西破坏了我的整个javascript文档。 我什至不知道它是选择正确的元素还是添加class属性，因为当var page = ""没有任何导航链接被隐藏。

有任何想法吗？ 谢谢你的帮助！

这是我的导航栏的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">Gallery</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

这是我正在使用的JQuery：

var is_mobile = false,
    page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
    var ul = $('nav > ul'),
        li = ul.children('li'),
        href = li.find('a[href*="'+page+'"]'),
        is404 = true;
    if($('#mobile').css('display')=='none') {
        is_mobile = true;       
    }
    if(is_mobile) {
        orderList();
        prepareList();
    }
    /************************************************************/
    /* Reorders the list relative to the page the user is on   */
    /**********************************************************/
    function orderList() {
        //remove the right border from the contact link
        $(li.find('a[href*="contact.php"]')).removeAttr('style');
        //move element to top
        ul.prepend(href.parent());
        //set top elements class to "top"
        $(href).attr( "class", "top" );
        if(page != ""){
            //loop through the nav elements
            li.children('a').each(function(){
                //if the name of the page the user is on matches one of the nav links execute the command
                if (page == $(this).attr('href')) {
                    is404 = false;
                }
            });
            if (is404) {
                //if the user is on a page not in the nav, add a 404 link at the top of the nav
                ul.prepend("<li><a href='404NotFound.php' class='top'>404</a></li>");
            }else if(page == ""){
                //set top links' class to "top"
                $(li.find('a[href*="index.php"]')).attr( "class", "top" );
            }else{
                $(href).attr( "class", "top" ); 
            }
        }
    };
    /*****************************************************************/
    /* Prepares the list to be dynamically expandable/collapsible   */
    /***************************************************************/
    function prepareList() {
        //loop through the nav elements and differentiate the first nav link and the remaining nav links
        li.children('a').each(function(){
            //check if the link has the class: "first"
            if ($(this).attr('class') == "top") {// attribute value matches variable value
                //make the first nav link function as the button to open and close the nav

            } else {// attribute doesn't exist, or its value doesn't match variable value
                //hide the remaining nav links with a slideUp animation
                $(this).slideUp("slow");
            }
        });
    }
});

Answer 1

由于我不是使用regex的最好人，因此我在lastIndexOf() & substring()的帮助下获得了string（ filename lastIndexOf() & substring() ：

小提琴

/*Getting File name*/
var is_mobile = false,
    path = document.location.pathname;
    var qpre = path.indexOf('?');
    if(qpre!=-1)
    {
        var page = path.substring(path.lastIndexOf('/')+1,path.lastIndexOf('?'));
    }
    else{
        var page = path.substring(path.lastIndexOf('/')+1);    
    }
/*End*/

/*Hiding li s with a href's not matching var page(string)*/
$('#nav li').each(function(){
    if($(this).children('a').attr('href')!=page)
    {
        $(this).hide();
    }
    if(page=="")
    {
        $('#nav li:nth-child(1)').show();
    }
});
/*End*/

---

更新资料

我编写了一个脚本，可以用更少的代码行完成所有您需要的功能

var is_mobile = false,
page = document.location.pathname.match(/[^\/]+$/)||[""]/*[0]*/;

if(page=="")
{
    page="index.php";
}
var i=0;
$('#nav li a:not([href^="'+page+'"])').each(
function(){
    $(this).slideUp();
    i++;
}).promise()
.done( function() {
    if(i==$('#nav li a').length)
    {
        $('#nav').append('<li><a href="404.php">404</a></li>');
    }
});

演示小提琴

Answer 2

如果没有匹配项（例如空字符串），则String.prototype.match返回null。 我认为您需要使用：

page = (document.location.pathname.match(/[^\/]+$/)||[""])[0]; // no path/relative

要么

page = (document.location.pathname.match(/[^\/]+$/)||["/"])[0]; // root path

|| 使错过匹配功能默认为带有后备字符串的单个元素数组。