【问题标题】:JQuery comand not retrieving all child elements properties, why?JQuery 命令没有检索所有子元素属性,为什么?
【发布时间】:2014-02-17 12:45:25
【问题描述】:

我有一些 JQuery,它根据我所在的页面选择其中一个导航链接,然后将其移动到列表的顶部。那工作正常。问题是我想做一个 if 语句来检查用户是否在不在导航链接中的页面上。如果 if 语句为真,它会在列表中添加一个 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') 只返回第一个导航链接: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,还获得技能集.php、gallery.php、about.php 和 contact.php

如果您访问我的网站,您会看到添加 404 链接的方法有效,但过于频繁。唯一不会添加 404 链接的情况是当您使用 ndi.grn.cc/ 或 ndi.grn.cc/index.php 时。您还会注意到这些功能使我的导航栏有点混乱和丑陋。这是因为我设置了此代码,因此它只会在我的移动网站上执行,该网站将有一个手风琴导航栏。为了简单起见(所以你们不必在你的 iDevices 或 Androids 上测试这个网站)我做了它,所以这段代码也可以在我的常规网站上执行。您可能还会注意到 Skillest.php 和 gallery.php 页面尚不存在。这个网站正在进行中;我有很多要补充和改进的地方。

顺便说一句,如果你在 ndi.grn.cc/ 上,var 页面将返回 "",如果你在 ndi.grn.cc/contact.php 上,或者即使你是在 ndi.grn.cc/contact.php?mail=sent 上。希望你能明白。

【问题讨论】:

  • 删除图库前的
  • @JonasT 这没有解决任何问题。

标签: javascript jquery html


【解决方案1】:

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

From jQuery (attr):

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

这意味着您需要将代码更新为如下所示:

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

祝你好运!

编辑:这是一个演示 each 的小提琴(我将带有 'gif' 的链接更改为 google.com)

http://jsfiddle.net/Qkxp7/

【讨论】:

  • 我把它放到我的$(document).ready(function(){:li.children('a').each(function(){ var nav_links = $(this).attr('href'); }) 中,它破坏了我的代码。
  • 你的代码是不是像这样:gist.github.com/anonymous/9173400fc74f73fb22dd
  • 另外,它有冒号吗? “function(){: li.children”(在“{”之后)
  • 不,应该不是这样。不,它没有冒号。
  • 哎呀,实际上不应该。让我一起拉小提琴!
猜你喜欢
  • 2015-05-28
  • 1970-01-01
  • 2015-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多