jquery - ネストされたリスト内のテキストの検索

Question

動的に生成されるリストがあります。私がやろうとしているのは、その人がいるページのネストされたリストのみを表示することです。それができると思う方法は、デフォルトでは、このリストのネストされたすべてのアイテムを非表示にし、(ul) の最初のレベルのみを表示することです。次にやりたいことは、ネストされたリストでページの名前を見つけることです (ページの名前は常にナビゲーションに表示されます)。見つかったら、見つかったすべての (li) neseted (ul) を表示します) と親 (ul)。現在、私はそれを手に入れたので、最初のレベルしか表示されないので、リストは次のようになります

Stone Mosaics
Glass Mosaics
Medallions & Murals
Etched Stone

バスケット織りのページにいる場合は、次のようにする必要があります。

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

もう一度、Basketweave を「見つけて」表示します。これは親であり、子です (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>

ご協力いただきありがとうございます。