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

Recommended Answers

All 5 Replies

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?

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.

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

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.