This is for my slidedown menu on my website, it will replace the clicked li item with the top li item and vice versa, but the problem is I don't know how to append the first item of the array to the li item that's clicked, using nth-child© won't work.

$(document).ready(function(){
    console.log("ready");
    
    var menuBar = [["Home", "index.html"], ["Calendar", "calendar.html"], ["Music Filter", "musicfilter.html"], ["Facebook Filter", "facebookfilter.html"], ["Stopwatch", "stopwatch.html"], ["Checklist", "checklist.html"], ["Alarm Clock", "alarmclock.html"], ["Email Alerts", "emailalerts.html"], ["Add Ons", "addons.html"]];
    
    var tabName;
    
    $(".nav-ul li").on("click", function(){
        tabName = $(this).text();
        console.log(tabName);
        clickCheck(tabName);
    });
    
    function clickCheck(n){
        alert(n);
        var selected;
        var cell;
        switch(n){
            case "Calendar":
                selected = menuBar[1];
                cell = 1;
                break;
            case "Home":
                selected = menuBar[0];
                cell = 0;
                break;
            case "Music":
                selected = menuBar[2];
                cell = 2;
                break;
            case "Facebook":
                selected = menuBar[3];
                cell = 3;
                break;
            case "Stopwatch":
                selected = menuBar[4];
                cell = 4;
                break;
            case "Checklist":
                selected = menuBar[5];
                cell = 5;
        }
        console.log(menuBar[0] + menuBar[cell]);
        var first = menuBar[0];
        menuBar[0] = selected;
        menuBar[cell] = first;
        console.log(menuBar[0] + menuBar[cell]);
        //newcell = selected;
        //newcell.unshift();
        updateNav(cell, first);
    }
    
    function updateNav(c, f){
        $(".nav-ul li").first().remove();
        $(".nav-ul").prepend("<li><a href='" + menuBar[0][1] + "'>" + menuBar[0][0] + "</a></li>");
        $(".nav-ul li:nth-child(c)").remove();
        $(".nav-ul li:nth-child(c)").append(f);
    }
});

I would argue that menubar would be better constructed as an array of objects so:

    var menuBar = [["Home", "index.html"], ["Calendar", "calendar.html"], ["Music Filter", "musicfilter.html"], ["Facebook Filter", "facebookfilter.html"], ["Stopwatch", "stopwatch.html"], ["Checklist", "checklist.html"], ["Alarm Clock", "alarmclock.html"], ["Email Alerts", "emailalerts.html"], ["Add Ons", "addons.html"]];

would become

 var menuBar = [
   {
     text: "Home", 
     url: "index.html"
   },
   {
     text: "Calendar",
     url: "calendar.html"
   },
   {
     text: "Music Filter",
     url: "musicfilter.html"
   },
   {
     text: "Facebook Filter",
     url: "facebookfilter.html"
   }
];

That will make things easier to work with. But as for your question I don't think you've made it clear exactly what you are trying to achieve here.

@@rbrtsmith

I'm trying to swap to first menu item around when another part of the menu is clicked. When I'm on the page that is clicked, it shows at the top of the menu, the rest of the menu is hidden, but on hover slides down so the user can select another page to swap to.

 

For example:

 

Home
Music

Stopwatch

Checklist

Alarm

 

When stopwatch is clicked, it's swapped with the top menu item

 

Stopwatch
Music

Menu

Checklist

Alarm

 

But I can't select the item that is clicked with jquery, i've tried nth-child and passing in a variable, but doesn't work. It would turn out like this:

 

Stopwatch
Music

Stopwatch

Checklist

Alarm

 

 

This won't work:

$(".nav-ul li:nth-child(c)").remove();
$(".nav-ul li:nth-child(c)").append(f);

Edited September 15, 20169 yr by NullDrone

(function($) {
  $(function() {
    function navList() {
      var $navList = $('.js-nav-list');
      
      function swapItems() {
        var $currentItem = $(this);
        var currentText = $currentItem.text();
        var $firstItem = $navList.find('li').first();
        var firstText = $firstItem.text();
        $firstItem.text(currentText);
        $currentItem.text(firstText);
      }

      $navList.on('click', 'li', swapItems);
    }
    navList();
     
  });
 })(jQuery);

http://jsbin.com/sonovogoze/edit?js,console,output

Edited September 15, 20169 yr by rbrtsmith

An interesting concept but not sure how usable this is. If it's for a private project than its something fun to play with but for a public website it's better to not mess with menus, people don't like surprises, they like consistency.

 

But it is something different and novel.

Yeah i don't see what this would actually be used for TBH.

I agree with the above, it's pretty confusing to have all the links swapped around.
Plus the code wont persist between pages so I take it you're planning on using AJAX to load content?

Anyway, to answer your question about the nth-child.

The selector you pass into jQuery is a String and Strings (prior to ES6) don't take variables.

jQuery has a $.eq method http://api.jquery.com/eq/

This selects an element at a specific index and you can pass in a variable;
eg.

var index = 2;
$("li").eq(index);