Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help breaking out of Nested for loops

    I'm in the process of building a simple time selector in javascript that will generate a nested dropdown menu with am/pm, hours and minutes in 15 min. increments. I'm having a problem getting the html snippets to append correctly. Here is my function right now...

    Code:
    _createTimePicker: function() {
    		
    		$('#timepicker').empty();
    		
    		var ampm = ["am","pm"];
    		var hours = ["1","2","3","4","5","6","7","8","9","10","11","12"];
    		var minutes = ["00","15","30","45"];
    		
    		$('#timepicker').append('<ul class="time_menu">');
    		
    			for (var i = 0; i < ampm.length; i++) {
    				$('#timepicker').append('<li><a href="" id="menulink">' + ampm[i] + '</a>');
    				$('#timepicker').append('<ul>');
    					for (var h = 0; h < hours.length; h++) {
    						$('#timepicker').append('<li><a href="' + hours[h] + ':00 ' + ampm[i] + '" id="menulink">' + hours[h] + ampm[i] + '</a>');
    						$('#timepicker').append('<ul>');
    							for (var m = 0; m < minutes.length; m++) {
    								$('#timepicker').append('<li><a href="' + hours[h] + ':' + minutes[m] + ' ' + ampm[i] + '" id="menulink">' + hours[h] + ':' + minutes[m] + ' ' + ampm[i] + '</a></li>');
    								continue;
    							}
    						$('#timepicker').append('</ul>');
    						$('#timepicker').append('</li>');
    						continue;
    					}
    				$('#timepicker').append('</ul>');
    				$('#timepicker').append('</li>');
    				continue;
    			}
    		$('#timepicker').append('</ul>');
    		
    	},
    The problem is, the </ul> and </li> portions are appending each time through. I was trying to use continue; to stop the iteration until the last array value was reached, but it's not working. Could someone tell me what I'm not getting here? Here is what a portion of the output looks like...

    Code:
    <div id="timepicker">
    	<ul class="time_menu"></ul>
        	<li><a href="" id="menulink">am</a></li>
        	<ul></ul>
        		<li><a href="1:00 am" id="menulink">1am</a></li>
        	<ul></ul>
                <li><a href="1:00 am" id="menulink">1:00 am</a></li>
                <li><a href="1:15 am" id="menulink">1:15 am</a></li>
                <li><a href="1:30 am" id="menulink">1:30 am</a></li>
                <li><a href="1:45 am" id="menulink">1:45 am</a></li>
           	<li><a href="2:00 am" id="menulink">2am</a></li>
            <ul></ul><li><a href="2:00 am" id="menulink">....

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    append() adds DOM elements - so for every <ul> there will be a </ul> added automatically if you left it out (as you have by trying to insert it separately at another spot).

    For example:

    $('#timepicker').append('<ul class="time_menu">');

    adds <ul class="time_menu"></ul> into the page.

    To append content inside that <ul> use:

    $('.time_menu').append()
    Last edited by felgall; 01-02-2014 at 09:55 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help but I never could get it to work correctly in Javascript. I'm working in Codeigniter which is why I wanted to keep it in the logic instead of the controller so what I ended up doing was making an ajax request to get the menu and writing it in PHP.

    Code:
    foreach($ampm as $amkey):
    				$timemenu .= '<li><a href="" id="menulink">'.$amkey.'</a>';
    				$timemenu .= '<ul class="time_menu">';
    					foreach($hours as $hour):
    						$timemenu .= '<li><a href="'.$hour.':00 '.$amkey.'" id="menulink">'.$hour.$amkey.'</a>';
    						$timemenu .= '<ul>';
    							foreach($minutes as $minute):
    							$timemenu .= '<li><a href="'.$hour.':'.$minute.' '.$amkey.'" id="menulink">'.$hour.':'.$minute.' '.$amkey.'</a></li>';
    							endforeach;
    						$timemenu .= '</ul>';
    						endforeach;
    				$timemenu .= '</ul>';
    				$timemenu .= '</li>';
    			endforeach;
    I have another question though, I'm trying to get the menu to list the <li> menu items horizontally instead of vertically. The first level is horizontal, but I would like all three levels to be horizontal and I'm having a little trouble with it. I know it must be the "ul.time_menu ul li" CSS rule but nothing I do will force it to display horizontally. Any help would be appreciated.

    Code:
    ul.time_menu li
    	{ 
    	position: relative; 
    	float: left; 
    	zoom: 1; /*Needed for IE*/
    	background: #b6d1ee; /*background color of menu header (1st level)*/
    }
    ul.time_menu li:hover
    { 
    	background: #65a7ed /*background color of menu header (1st level) on hover*/; 
    }
    ul.time_menu li a
    {
    	/*Menu link styles*/
    	display: block; 
    	padding: 5px; 
    	color:#000000;
    	font-family: Arial, Times New Roman, Tahoma;
    	font-size: 12px;
    }
            
    /* Building menu items - for 2nd and more level menu items*/
    ul.time_menu ul 						
    { 
    	display:none; /*initially menu item is hidden*/
    	position: absolute; /*absolute positioning is important for menu to float*/
    	width: 60px; 
    			
    	/*Formating of menu items*/
    	border:1px solid #65a7ed;
    	padding:1px;
    	background:#b6d1ee;
    			
    	/*optional - to change position of 2nd level menu item*/
    	top: 100%; 
    	left: -50%; 
    }
    ul.time_menu ul li
    { 
    	background: #b6d1ee; 
    	color: #000; 
    	border-bottom: 1px solid #DDDDDD; 
    	float: none; 
    }
    									  
    ul.time_menu ul li a
    { 
    	width: 100%; 
    	display: block; 
    	color:#000000;
    } 
    
    #menulink {
    	text-decoration:none;
    }
    
    /* Menu item position for 3rd level and more */
    ul.time_menu ul ul
    { 
    	left: 100%; 
    	top: 0; 
    }
            
    /* Hover effect for menu*/
    ul.time_menu li:hover > ul 			
    { 
    	display:block;
    }


  •  

    Posting Permissions

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