Finding Text within a nested list

Question

i have a list that's dynamically generated. What i'm trying to do is show only the nested list of the page the person is on. How i think i can do that is by default i will hide all the nested items of this list, giving me only the first level of the (ul). What I want to do next is find in the nested list the name of the page (the name of the page will always be in the navigation) and when i find it, i want to show all of the found (li) neseted (ul)'s and parent (ul). Currently i got it so it only shows me the first level so my lists looks like this

Stone Mosaics
Glass Mosaics
Medallions & Murals
Etched Stone

If i'm on the basket weave page, i need it to look like this:

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

So again, "find" Basketweave and show it and it's parent and it's children (1 level down). I hope this makes sense. Here's the code of the list:

<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>

Thanks for all of your help!

Are you looking to add additional functionality after this step, like expanding and collapsing the nodes? If so, you might want to use a tree implementation like jstree? That provides an easy way to specify the nodes that need to be visible. — sriniris
– sriniris, Commented May 10, 2013 at 14:11
i'm actually not. i was able to figure out how to do it so that the subnav is shown $("#subNav li:contains('Basketweave')").parents('ul').show();, but i'm still trying to figure out how to do the children. — Damien
– Damien, Commented May 10, 2013 at 14:14

Jake Zeitz · Accepted Answer · 2013-05-10 15:26:23Z

1

Since you cannot alter the html or css here is a jquery solution:

$(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() is case sensitive so 'basketweave' would not be found but 'Basketweave' would. Found a function that will capitalize first letter to find a match.

example: http://jsfiddle.net/hKx8A/8/

edited May 10, 2013 at 15:26

answered May 10, 2013 at 14:17

Jake Zeitz

2,5844 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Damien Over a year ago

Unfortunately i don't really have flexibility here. Seems to be somewhat working. The only thing is It's not showing the nested ul under Medallions & Murals, that doesn't work.

Jake Zeitz Over a year ago

so the html is unchangeable and you can't use css is what you are saying?

Jake Zeitz Over a year ago

Ok I updated my answer to be only jquery, there is still a problem that I'm tryin to work out though.

Jake Zeitz Over a year ago

added a capitalize first letter function

Jake Zeitz Over a year ago

fixed problem with multiple word urls

|

user2123506 · Accepted Answer · 2013-05-10 14:51:35Z

0

i usually handle the sub-nav visibillity per '.active' class.

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

My first suggestion is, that you should add this class during the nav generation (in backend i guess?).

If you want to solve it using jQuery... u could do something like this:

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

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

edited May 10, 2013 at 14:51

answered May 10, 2013 at 14:16

user2123506

112 bronze badges

3 Comments

Damien Over a year ago

Unfortunately i don't really have flexibility here. Seems to be somewhat working. The only thing is It's not showing the nested ul under Medallions & Murals, that doesn't work.

user2123506 Over a year ago

It might be because of the difference in the text encryption. in 'Stone Mosaics' the space is replaced by a dash (-) by 'Medallions & Murals' its '_ and _'

Damien Over a year ago

It's not a path i'm trying to match. The page that the person is on has a pageName variable (out of my control). The subNav has the same pageName in it as the li text. I cannot modify the text in the subNav. So i have to match pageName=subNav.pageName.

Collectives™ on Stack Overflow

Finding Text within a nested list

2 Answers 2

16 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related