Member Avatar for Violet_82

HI there, I was wondering if anybody can advise.
I am trying to build an unordered list with a few items in a page, and I want this list to be created and displyaed dynamically.
So I create an array of strings and then through jquery I want this to slowly appear at page load (I have seen this test advertised on a website somewhere and I thought I give it a go but I am not 100% how to proceed)
Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script type = "text/javascript" src = "script.js"></script>
    </head>

    <body>
        <div id = "cities">

        </div>
    </body>

</html>

and the css is here:

#cities
    {

        background-color:green;
        width:100%;
        height: 400px;
        borde: 1px solid blue;

    }

Now to the script, I have done just a bit of it because I am not too sure how to go about it:

var city_arr = new Array(4) {"London", "Madrid", "Leeds", "Barcelona"};

var cities_div = document.getElementById("cities");

$my_cities = $("#" + city_arr);

var index = 0;

function getCities(){


    $("#cities").html("<ul><li>"$my_cities[index]...)
}...

Now, I wouldn't want to get the code from anyboy, rather I would like to try to write some code myself, and learn something, but I was hoping somebody can give me some good suggestions as to how to proceed.
After I created the array in the script I was hoping I could display each item in the array in a formatted bullet list, perhaps creating the list using the html() method, but I have soon realized that I can't create multiple <li> tags with the same method...uhm...
thanks

  • 3 Contributors
  • 5 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for Violet_82

Hi thanks for that. I have thought so but the list doesnt exist yet, it needs to be created with the script, does that make a difference?

Member Avatar for Airshow

Violet,

In your HTML, you will find it slightly easier to hard code <ul id="cities"></ul>.

In javascrit, you need to:

  • find the ul element with $('ul#cities')
  • loop through city_arr to add <li> elements, each containing a city name, to the cities element.
  • add a visual effect to hide the <ul> or its <li>s initially, then display them sexily (use eg. fadeIn() or slideDown()).

I did it with 6 lines of javascript.

If you need to cheat, then peek here.

Member Avatar for Violet_82

Hi Airshow, thanks for the suggestions, yes it actually makes more sense to add the list and work on the single elements. I will do that. I won't cheat as yet, I want to give it a go myself first, then if I get stuck I will look at that
thanks again

Member Avatar for Violet_82

Hi I have done it finally, although it looks significantly different from yours (and for some odd reasons it works on my computer but not in jsfiddle...uhm....)
The approach I took was - following your suggestions and adding a little bit of my own initiative - to have the empty unordered list and populate it with the <li> tags and the city names.
Here's the code with some modification here and there compared to the original
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script type = "text/javascript" src = "script.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>

    <body onload = "getCities()">
        <div id = "cities">
            <ul id = "cities_list">



            </ul>

        </div>
    </body>

</html>

CSS:

#cities
    {

        background-color:green;
        width:100%;
        height: 400px;

    }

#cities_list
    {

    display:none;
    background-color: yellow;   
    }

script:

var city_arr = new Array("London", "Madrid", "Leeds", "Barcelona");

var index;



function getCities(){

        for (index = 0; index < city_arr.length; index++)

        {
            $("#cities_list").append("<li>"  + city_arr[index] + "</li>");


            //$("#cities_list").html("<li>"  + city_arr[index] + "</li>");

        }
    $("#cities_list").show('slow');

    }

This works : - )! Sorry it took me a bit to get there!
A mistake I was making was to have this in the scriptfor (index = 0; index < city_arr.length; index++) { $("#cities_list").html("<li>" + city_arr[index] + "</li>");... not realizing that the html method within the loop doesn't assign 4 bullet point to the list but at every run it clears the previous item and adds another one, therefore leaving me with only 1 bullet point. It took me a while to understand that, I simply thought that there was an error in my code. SO I thought to resort to the append method which has actually done the trick.

Now, about your code. I had a look at it, few questions if I may:
this bit

$.each(city_arr, function(index, value) {
    var $li = $("<li/>").html(value).appendTo($citiesContainer).hide();
});

what are you assigning the each method to? it just says $ there's no selector!

I had a look at the http://api.jquery.com/each/, thinking that it would have helped me but in fact it made things a little more complicated for me.
The function(index, value) in particular is what is confusing me a bit. So to summarize: this function should run for each matched element, but the matched element is just $...so I am not sure what that means. Also what do the index and elements parameters stand for? I presume index for the index of the array - say in my case index = 4 because the elements are 4...uhm...sorry

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.