jQuery - eq() seems to refer to a different element than index() - What gives? :/

Question

Here's my code: UPDATED JS

jQuery(document).ready(function()
{
   var cookieName = 'activeMenus';
   var openMenus  = (jQuery.cookie(cookieName) == null) ? 0 : jQuery.cookie(cookieName).substring(1).split(',');
   var wookie     = '';

   jQuery('ul.menu li ul').css('display', 'none');

   // Reopen all the menus from the cookie
   if (openMenus != 0)
   {
      for (var i = 0; i < openMenus.length; i++)
      {
         alert('Opening: ' + openMenus[i]);
         jQuery('ul.menu li').children('ul').eq(openMenus[i]).css('display', 'block');
      }
   }

   // Hide the menu upon click and modify the cookie
   jQuery('ul.menu span.topdaddy span').click(function()
   {
      // Toggle the menu for the clicked link
      jQuery(this).parents('li').find('ul').slideToggle('slow', function()
      {
         // Once the menu has been toggled - Find all the open menus
         jQuery('ul.menu li').children('ul:visible').each(function()
         {
            wookie += ',' + jQuery(this).index(); // Build the index list
            jQuery.cookie(cookieName, wookie);
         });
      });

      wookie = '';
  });
});

HTML

<ul class="menu">
   <li class="item1">
      <a href="#"><span>Link 1</span></a>
   </li>

   <li class="parent item55">
      <span class="topdaddy"><span>Link 2</span></span>

      <ul>
         <li class="item62">
            <a href="#"><span>Link 3</span></a>
         </li>

         <li class="item63">
            <a href="#"><span>Link 4</span></a>
         </li>
      </ul>
   </li>

   <li class="parent item56">
      <span class="topdaddy"><span>Link 5</span></span>

      <ul>
         <li class="item69">
            <a href="#"><span>Link 6</span></a>
         </li>

         <li class="parent item70">
            <ul>
               <li>asdasd</li>
            </ul>
         </li>
      </ul>
   </li
</ul>

It's a menu system that uses cookies to remembers the currently opened menus to reopen those menus each page load.

The code works... But it's a little buggy.

The .eq() call is opening index 2 rather than 1. They're both supposed to be 0-based indexes, so I see no reason why it should be doing this.

Any ideas?

Answer 1

Ok. I added > where it was needed. Also, the index() number we were grabbing took into account the first li under ul.menu that doesn't have .parent class. That's fine, but I just had to make sure that we setting the index on the full set of li under ul.menu, not limiting the collection to li.parent

Let me know how this works for you.

    $(document).ready(function() {

           var cookieName = 'activeMenus';
           var openMenus  = (jQuery.cookie(cookieName) == null) ? 0 : jQuery.cookie(cookieName).substring(1).split(',');
           var wookie     = '';

           jQuery('ul.menu > li.parent > ul').css('display', 'none');

           if (openMenus != 0) {
              for (var i = 0; i < openMenus.length; i++) {
                 alert('Opening: ' + openMenus[i]);
                jQuery('ul.menu > li').eq(openMenus[i]).children('ul').css('display', 'block');
              }
           }
           jQuery('ul.menu span.topdaddy').click(function() {
              jQuery(this).next().slideToggle('slow', function() {
                 jQuery('ul.menu > li.parent > ul:visible').each(function() {
                    wookie += ',' + jQuery(this).parent().index(); 
                    jQuery.cookie(cookieName, wookie);
                 });
              });
              wookie = '';
          });
    });

---

This code:

jQuery('ul.menu li').children('ul:visible').each(function()
     {
        wookie += ',' + jQuery(this).parent().index(); // Build the index list
        jQuery.cookie(cookieName, wookie);
     });

...seems to be getting the index of a li element that is a child of ul.menu.

While this code:

     jQuery('ul.menu li ul').eq(openMenus[i]).css('display', 'block');

...seems to be using the index from above, but on a different set of elements (the ul that is a child of the index you stored in the cookie).

So it looks like you're taking the index of a ul.menu li and using it on a ul.menu li ul.