jQuery help needed

[ringo747]

Hi, I am trying to use jQuery to hide some items in a list to only show the trail of the selected node.

See this JSFiddle for the markup:
http://jsfiddle.net/QLbAS/4/

 

[fez]

You have to have something specific with which to target those elements that you wish to hide. Unless you know where something is going to be, have a unique way of selecting it or can do a reverse lookup you will be stuck.

If you can provide either the ones to hide or the ones not to hide with a special class to target them you can hide them. Honestly though, if you are doing a menu which has links that are visited normally, you should really be handling that sort of thing in your server side code as much as possible.

When you output your list of links, your html should have classes added to those that should be hidden or those that should be shown. That would give you the flexibility to just add / remove classes from branches in the tree and hide / show what you want.

Quite often the best way to handle modifying css properties when using jQuery is to use css classes rather than modifying properties directly. This is obviously a very rough guide as you may want to animate through ranges of values or only have a single modification that is not re-used elsewhere but its more efficient to allow the CSS to do the work rather than modifying element properties.

 

[Tripnologist]

You should really listen to Fez on this. It's really not the best way of going about things.
If you're unable to do it the right way however and this is your last hope, I've updated your jsfiddle. It's not the prettiest, but it should work.

http://jsfiddle.net/QLbAS/6/

 

[ringo747]

Thanks guys. The problem is that this is a type of SharePoint control that I have no control over what is rendered.

All I have to go on is the selected li element. I had thought I could maybe hide all items to begin with and then show only the path to the selected node but I'm not sure how to do this without knowing the number of nested elements.

Edit: trip that code works for the level shown in my markup in JSFiddle but it doesn't work correctly for other levels in the navigation.

 

[fez]

You would have to do some DOM traversal back from the selected node in that case or simply iterate over the whole lot. It looks like you need to keep other menus partially open so as long as you know at what nesting level you want items hidden, you should be able to do that.

Have a good look over the jQuery documentation as there is a huge amount to it and its been a while since I really looked into the changes made over the past few years. My advice would be to think about how you wish to solve the issue and then do a bit of research on what jquery functions are the most lightweight / easy to use for your purpose.

 

[ringo747]

Got it sorted last night. Thanks for the pointers.

$(document).ready(function($) {
   $(function() {
       $(".s4-ql ul.root ul li").hide();
       $("li.selected").parents("li").andSelf().each(function(index,elem) {
       $(this).siblings().andSelf().show();
    });
    $("li.selected").children("ul").children("li").show();
  });
});

 

[GravyMonster]

Just FYI, you've got two document ready handlers there, you can cut out the first one:

$(function() {
    $(".s4-ql ul.root ul li").hide();
    $("li.selected").parents("li").andSelf().each(function(index,elem) {
        $(this).siblings().andSelf().show();
    });
    $("li.selected").children("ul").children("li").show();
});

 

[ringo747]

Just FYI, you've got two document ready handlers there, you can cut out the first one:

$(function() {
    $(".s4-ql ul.root ul li").hide();
    $("li.selected").parents("li").andSelf().each(function(index,elem) {
        $(this).siblings().andSelf().show();
    });
    $("li.selected").children("ul").children("li").show();
});

Do I not need the ready function?

 

[Tripnologist]

You can use either or. They do the same thing.

 

[GravyMonster]

Do I not need the ready function?

You need only one, but this:

$(document).ready(function() { });

is exactly the same as:

$(function() { });

I think the latter is more prevalent due it being shorter.

*ninja*
Sorry Mr Trip, just saw you posted the same thing

 

[ringo747]

Thanks chaps.

 

[Tripnologist]

Sorry Mr Trip, just saw you posted the same thing

haha, no worries.