Jquery 在嵌套列表中查找文本

我有一个动态生成的列表。我试图做的是只显示此人所在页面的嵌套列表。我认为我可以如何做到这一点是默认情况下，我将隐藏此列表的所有嵌套项，只给我（ul）的第一级。接下来我要做的是在嵌套列表中查找页面的名称（页面的名称将始终位于导航中），当我找到它时，我要显示所有找到的（li）内塞特（ul）和父（ul）。目前我得到了它，所以它只显示了我的第一级，所以我的列表看起来像这样

Stone Mosaics
Glass Mosaics
Medallions & Murals
Etched Stone

如果我在篮子编织页面上，我需要它看起来像这样：

Stone Mosaics
  Basketweave
    one
    two
    three
  Blanch
  Chex
Glass Mosaics
Medallions & Murals
Etched Stone

var href            = window.location.pathname,
    pagename        = href.split('/')[1];

$('#subNav > ul > li > a[href*="'+pagename+'"]').parent('li').addClass('active');

所以，再一次，“发现”编织并展示它和它的父母，它的孩子（1级以下）。我希望这是有道理的。以下是列表的代码：

<div id="subNav">
  <ul>
    <li> <a href="/stone-mosaics?nav=collections">Stone Mosaics</a>
      <ul>
        <li> <a href="/basketweave?nav=collections">Basketweave</a> </li>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ul>
        <li> <a href="/blanch?nav=collections">Blanch</a> </li>
        <li> <a href="/chex?nav=collections">Chex</a></li>
      </ul>
    </li>
    <li> <a href="/glass_mosaics?nav=collections">Glass Mosaics</a> </li>
    <li> <a href="/medallions_and_murals?nav=collections">Medallions &amp; Murals</a>
      <ul>
        <li> <a href="/cucina?nav=collections">Cucina</a> </li>
        <li> <a href="/glow?nav=collections">Glow</a> </li>
        <li> <a href="/Louvre?nav=collections">Louvre</a> </li>
        <li> <a href="/pools?nav=collections">Pools</a> </li>
        <li> <a href="/Tapeti?nav=collections">Tapeti</a> </li>
      </ul>
    </li>
    <li> <a href="/etched_stone?nav=collections">Etched Stone</a>
      <ul>
        <li> <a href="/Barroque?nav=collections">Barroque</a> </li>
        <li> <a href="/Bordo-Antico?nav=collections">Bordo Antico</a></li>
      </ul>
    </li>
  </ul>
</div>

一个
两个
三

---

谢谢你的帮助

我通常根据.active类处理子导航可见性

#subNav > ul > li > ul {
    display: none;
    visibility: hidden;
}
#subNav > ul > li.active > ul {
    display: block;
    visibility: visible;
}

我的第一个建议是，您应该在nav生成期间添加这个类（我想是在后端？）

如果您想使用jQuery解决它。。。你可以这样做：

Stone Mosaics
  Basketweave
    one
    two
    three
  Blanch
  Chex
Glass Mosaics
Medallions & Murals
Etched Stone

var href            = window.location.pathname,
    pagename        = href.split('/')[1];

$('#subNav > ul > li > a[href*="'+pagename+'"]').parent('li').addClass('active');

---

由于您无法更改html或css，因此这里有一个jquery解决方案：

$(document).ready()function(){
    var pathname = window.location.pathname;

    //remove the '/' then remove '?' and everything after it
    var fixpath = pathname.replace('/','').replace(/\?.+/,'');

    //in the case of url with two words, remove '-' and test with first word
    fixpath = fixpath.replace(/-.+/,'');

    //or remove everything after '_'
    fixpath = fixpath.replace(/_.+/,'');

    function capitaliseFirstLetter(string){
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    fixpath = capitaliseFirstLetter(fixpath);

    $('#subNav li:contains(' + fixpath + ')').parents('ul').show();
    $('#subNav li:contains(' + fixpath + ')').children('ul').show();
}

contains（）

区分大小写，因此不会找到“basketweave”，但会找到“basketweave”。找到将首字母大写以查找匹配项的函数

---

示例：

您是否希望在此步骤之后添加其他功能，如展开和折叠节点？如果是这样的话，您可能希望使用树实现，如？这提供了一种简单的方法来指定需要可见的节点。实际上我不是。我能够弄清楚如何显示subnav$（“#subnav li:contains（'Basketweave'）））。parents（'ul'）。show（）；，但我仍在想怎么照顾孩子。谢谢你所做的一切！不幸的是，我在这里没有真正的灵活性。似乎有点起作用了。唯一的问题是它没有在奖章和壁画下显示嵌套的ul，这不起作用。所以html是不可更改的，你不能使用css，这就是你所说的吗？好吧，我更新了我的答案，使之仅限于jquery，不过，我仍在努力解决一个问题。添加了大写首字母函数修复了多单词URL的问题。幸运的是，我在这里没有太多的灵活性。似乎有点起作用了。唯一的问题是它没有在奖章和壁画下显示嵌套的ul，这不起作用。这可能是因为文本加密的不同。在“石头马赛克”中，空间被破折号（-）替换为“奖章和壁画”，而“这不是我想要匹配的路径”。此人所在的页面有一个pageName变量（我无法控制）。subNav中的页面名与li文本中的页面名相同。我无法修改subNav中的文本。所以我必须匹配pageName=subNav.pageName。