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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Input data from array into ul list

    I want to put the data from array into list by looping elements and inserting it one after another into <li> section.
    JS:
    Code:
    <script>
    	 var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','4','X'];
    
       $.each( function(i) {
    
              items.push('<li><a>' + items + '</a></li>');
    
       });  // close each()
    
       $('#jMenu').append( items.join('') );
    	
    	</script>

    html:


    Code:
    <ul id="jMenu">
    	
    	
    	<li><a class="fNiv" ></a>
    	
    		<ul>
    			
    			<li><a> </a>
    				</li>
    			<li><a></a>
    				
    			</li>
    			<li><a></a>
    				
    			</li>
    			<li><a></a>
    				
    			</li>
    			<li><a></a>
    				
    			</li>
    			
    			<li><hr><a></a></li>
    			
    			
    		</ul>
    		
    	</li>
    	</ul>

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think something is wrong in JS, maybe you will help? ;]

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Code:
    var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','4','X'];
    var menuObj = $('#jMenu');
    // $(menuObj).empty(); // to clear items before insertion
    $.each(items, function() {
      $(menuObj).append('<li><a>' + this + '</a></li>');
    });

  • Users who have thanked niralsoni for this post:

    adasiax (05-14-2013)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts

    Lightbulb

    Something along these lines without JQuery...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    
    <style type="text/css">
    #jMenu0 ul li { list-style-type:none; }
    </style>
    
    </head>
    <body>
    
    <ul id="jMenu">
      <li><a class="fNiv" href="#">fNiv Selections</a>
        <span id="jMenu0"></span>
      </li>
    </ul>
    
    <script type="text/javascript">
    function makeMenu() {
      var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','4','X'];
      var str = '<ul><li>';
          str += items.join('</li><li>');
          str += '</li></ul>';
      document.getElementById('jMenu0').innerHTML = str;
    }
    window.onload = function() { makeMenu(); }
    </script>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    adasiax (05-14-2013)

  • #5
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well it works, but code is breaking when i add my css ;/ Here it is:



    Code:
    #jMenu {
    	display:table;
    	margin:0;
    	padding:0;
    	bottom:305px ;
    	position:relative;
    	}
    
    /********************/
    /** premier niveau **/
    /********************/
    #jMenu li {
    	display:table-cell;
    		
    	
    	float:left;
    	
    	margin: 0;
    	padding: 0;
    	border: 0;
    	display: block;
    	float: left;	
    	position: relative;	
    	z-index: 5;
    	background:#008000;
    }
    	#jMenu li a {
    		font-weight:bold;
    		padding:10px;
    		display:block;
    		background-color: transparent;
    		color:#fff;
    		text-transform:uppercase;
    		cursor:pointer;
    		font-size:12px;
    	}
    	
    
    /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    #jMenu li ul {
    	display:none;
    	position:absolute;
    	padding:0;
        margin: -215px 0 0 ;
    
    
    
    	
    	
    	
    }
    	#jMenu li ul li {
    		background-color:#322f32;
    		display:block;
    		padding:0;
    		position:relative;
    		
    	}
    	#jMenu li ul li.arrow {
    		
    		height:6px;
    		padding:0;
    		border-bottom:none;
    		padding-bottom:10px
    	}
    		#jMenu li ul li a {
    			font-size:11px;
    			text-transform:none;
    			padding:7px;
    			display:block;
    			position:relative;
    			
    		}
    		#jMenu li ul li a.isParent {
    			background:#3A3A3A url('../arrow_right.png') no-repeat right center;
    			
    		}
    			#jMenu li ul li a:hover {
    				background-color:#514c52;
    				border-top:1px solid #322f32;
    				border-bottom:98%;
    				
    			}


  •  

    Tags for this Thread

    Posting Permissions

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