SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Reordering Nested Menu with detach() problems.

    Hi everyone,

    Having a bit of trouble with some jQuery. I would like to re-order a menu that has nested submenus.

    I wanted to reorder by li items that do not have an anchor with a class of linked. So for the list items with no chold a.linked, I wanted to move these all the way to the top of the list, keeping the nexted menu order intact.

    I though I could just detach these using jquery and prepend them to the list but the ordering has gone bonkers, and the nested structure is gone.

    If anyone could take a look at my code I would be so grateful.

    The correct re-ordered list should be:

    Pasta
    Soup
    Cheese
    Bread

    (With all nested ULs intact and in order)

    My code is as follows.

    Thanks so much.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div id="food">
    	<ul>
    		<li><a class="linked" href="#">Cheese</a>
    			<ul>
    				<li><a href="#">Cheddar</a></li>
    				<li><a href="#">Stilton</a></li>
    				<li><a href="#">Roquefort</a></li>
    			</ul>
    		</li>
    		<li><a class="linked" href="#">Bread</a>
    			<ul>
    				<li><a class="linked" href="#">Granary</a></li>
    				<li><a class="linked" href="#">Wholemeal</a></li>
    				<li><a href="#">White</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Pasta</a>
    			<ul>
    				<li><a href="#">Fusili</a></li>
    				<li><a href="#">Penne</a></li>
    				<li><a href="#">Conchiglie</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Soup</a>
    			<ul>
    				<li><a href="#">Stilton &amp; Broccoli</a></li>
    				<li><a href="#">Wild Mushroom</a></li>
    				<li><a href="#">Minestrone</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    
    
    
    <script>
    var menuReorder = {
    	init: function() {
    		$('#food ul:first li a:not(.linked)').parent().detach().prependTo('#food ul:first');
    	}
    }
    
    $(document).ready(function(){
    	menuReorder.init();
    });
    </script>
    
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Use > to ensure that more deeply nested elements are not affected
    '#food ul:first>li>a:not(.linked)'

    You can also do without the .detatch() method, because when there is just one target, prepend moves the elements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that's great


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •