Question

我有一些JQuery选择其中一个导航链接 - 基于我所在的页面 - 然后将其移动到列表的顶部。这工作正常。问题是我想制作一个if语句来检查用户是否在不在nav链接中的页面上。如果if语句为true，它将在列表中添加一个404导航链接（但这个前置部分工作正常，所以它有点不敬）。

这是导航栏的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 page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
    var ul = $('nav > ul'),
        li = ul.children('li'),
        href = li.find('a[href*="'+page+'"]');
    //move element to top
    ul.prepend(href.parent());
    if(page != li.children('a').attr('href') && page != ""){
        ul.prepend("<li><a href='404NotFound.php'>404</a></li>");
    }
});

正如您所看到的，if语句应该检查我的页面变量是否不等于列表元素中包含的链接值，并且页面变量不是空白。这个问题是li.children('a').attr('href')只返回第一个nav链接：index.php，而没有其他链接。因此，如果我在除主页之外的任何页面上，则if语句将返回true。

我非常乐于接受建议，比如如果if语句不是我正在尝试做的最好方式，即如果有某种方法来检查ul.prepend(href.parent());是否实际执行了。谢谢！

更新

我会在这里解释一下我要求的更好一点。我在ndi.grn.cc/有一个服务器（无法在JSFiddle上完全证明这一点）。当有人去ndi.grn.cc/,ndi.grn.cc/index.php,ndi.grn.cc/skillsets.php,ndi.grn.cc/gallery.php,ndi.grn.cc/about.php或者ndi.grn.cc/contact.php我不希望if语句返回true（然后使404链接不被创建和预先添加）虽然我确实希望各自的导航链接被预先添加（它们是被假装所以不要担心这一点。我想要有人去ndi.grn.cc/asdkjgkj时添加404链接，或者只是拼错一些东西并转到ndi.grn.cc/skilsets.php。所以基本上我希望li.children('a').attr('href')不仅仅是：index.php，还有skillsets.php，gallery.php，about.php和contact.php

如果您访问我的网站，您会看到添加404链接有效，但过于频繁。只有当你在ndi.grn.cc/或ndi.grn.cc/index.php上时，才会添加404链接。您还会注意到这些功能使我的导航栏有点令人困惑和丑陋。这是因为我已经设置了这个代码，所以它只能在我的移动网站上执行，该网站将有一个手风琴导航栏。为了简单起见（所以你们不必在你的iDevices或Androids上测试这个网站）我做了这个代码也在我的常规网站上执行。您可能还注意到skillsest.php和gallery.php页面尚不存在。这个网站是一项非常大的工作;我有很多要补充和改进的地方。

顺便说一下，如果你在ndi.grn.cc/上，var页面会返回“”，如果你在ndi.grn.cc/contact.php上，那么“contact.php”或者即使你是在ndi.grn.cc/contact.php?mail=sent上。希望你明白了。

Answer 1

问题在于你如何调用attr。 attr只会匹配第一个匹配的元素。

From jQuery (attr):

为匹配元素集合中的第一个元素获取属性的值，或为每个匹配元素设置一个或多个属性。

这意味着你想要更新你的代码看起来像这样：

li.children('a').each(function(){ /* do something with $(this).attr() */ })

祝你好运！

编辑：这是一个演示each的小提示（我将链接改为'gif'到google.com）

http://jsfiddle.net/Qkxp7/

JQuery命令没有检索所有子元素属性，为什么？

1 个答案: