2

I want my JQuery to select one of the navigation links—based on the page that I'm on—and then I want it to move it to the top of the list.

This is the HTML of my navigation bar:

<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"><icon>Gallery</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

This is the JQuery I'm using to try and reorder the list:

var page = document.location.pathname.match(/[^\/]+$/)[0];
var ul = $('nav').children('ul'),
    li = ul.children('li');
$(document).ready(function(){
    ul.prepend($('a[href*='+page+']').parent());
});

Needless to say, it isn't working.

By the way alert(page);

outputs the name of the file of the page that I'm on, ei: "contact.php", but alert($('a[href*=page]').parent());

just outputs "[object Object]"

. Any ideas? Thanks!

Logan Kling
  • 569
  • 2
  • 6
  • 19
  • You should use console.log(obj) to print the object. You can also refer to this post http://stackoverflow.com/questions/957537/how-can-i-print-a-javascript-object – Radhika Feb 13 '14 at 06:46

3 Answers3

2

There are several errors in your code:

  1. The ul is undefined, you should select the element using $('ul') or $('#nav').
  2. You haven't closed the document ready handler. Missing ).
  3. You don't concatenate the strings, ie $('a[href*='+page+']').parent()

Also for debugging you should use the console object and log() the value, alert tries to the show the string representation of a value, it outputs [object Object] as toString() method of the above object returns this value. console.log(anIdentifier).

Update:

Note that you are selecting the elements before the DOM is ready, so when you are trying to select the element as the DOM is not ready, ul can be an empty collection. You should select the elements within the document ready handler. 

$(document).ready(function(){
    var ul = $('#nav'), li = ul.children('li');

    ul.prepend($('a[href*=page]').parent());
});
Ram
  • 143,282
  • 16
  • 168
  • 197
  • Thanks for the debug! By the way, my actual code wasn't missing the `);` I just forgot to copy and paste that in. Though I was wondering if I could make my definition of `ul` more finite by doing this: `ul = $('nav').children('ul'),` – Logan Kling Feb 13 '14 at 06:57
  • @LarryK Yes, you can and it's a good practice as you don't recreate the objects (_caching_), if the element has an ID, using ID selector is more efficient `$('#nav')`. – Ram Feb 13 '14 at 07:02
  • @wared Well, when I had posed the answer (_before the update_), the `ul` was `undefined`. The update invalidated the first and second items. – Ram Feb 13 '14 at 07:07
  • @undefined Okay, now my code looks like this: `var ul = $('nav').children('ul'), li = ul.children('li'); $(document).ready(function(){ ul.prepend($('a[href*='+page+']').parent()); });` but it's still not working. – Logan Kling Feb 13 '14 at 07:11
  • @undefined Wow thanks! I can't believe I didn't think of that! – Logan Kling Feb 13 '14 at 07:23
0

First you need to find the li with the given url then call the prepend

$(document).ready(function () {
    var page = document.location.pathname.match(/[^\/]+$/)[0];
    $('#nav a[href="' + page + '"]').parent().prependTo('#nav');
})

Demo: Fiddle

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
0
  1. you need to change it to $('ul') to get the ul element
  2. $('a[href*=page]') should be $('a[href*="'+page+'"]')

so it will look like:

var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
    $('ul').prepend($('a[href*="'+page+'"]').parent());
});

** For debugging, you may use console.log() and check in the browser console instead of using alert(), it can provide you more information.

oldlam
  • 13
  • 5