hello all,
i want to create dynamacially this thing and want to populate data alternatively on green,red,gray li and so on but i can't able to do it plz help
i am weak in js :(

<li class="green">
                                <div class="metro_tmtime" datetime="2013-04-10 18:30">
                                <span class="date">1/4/13</span>
                                <span class="time">17:20</span> 
                                </div>
                                <div class="metro_tmicon">
                                    <i class="icon-bell"></i>
                                </div>
                                <div class="metro_tmlabel" id="data1">

                                </div>
                            </li>
                            <li class="purple">
                                <div class="metro_tmtime" datetime="2013-04-10 18:30">
                                <span class="date">1/4/13</span>
                                <span class="time">17:20</span> 
                                </div>
                                <div class="metro_tmicon">
                                    <i class="icon-bell"></i>
                                </div>
                                <div class="metro_tmlabel" id="data2">

                                </div>
                            </li>
                            <li class="yellow">
                                <div class="metro_tmtime" datetime="2013-04-10 18:30">
                                <span class="date">1/4/13</span>
                                <span class="time">17:20</span> 
                                </div>
                                <div class="metro_tmicon">
                                    <i class="icon-bell"></i>
                                </div>
                                <div class="metro_tmlabel" id="data3">

                                </div>
                            </li>
                            <li class="gray">
                                <div class="metro_tmtime" datetime="2013-04-10 18:30">
                                <span class="date">1/4/13</span>
                                <span class="time">17:20</span> 
                                </div>
                                <div class="metro_tmicon">
                                    <i class="icon-bell"></i>
                                </div>
                                <div class="metro_tmlabel" id="data4">

                                </div>
                            </li>
                            <li class="blue">
                                <div class="metro_tmtime" datetime="2013-04-10 18:30">
                                <span class="date">1/4/13</span>
                                <span class="time">17:20</span> 
                                </div>
                                <div class="metro_tmicon">
                                    <i class="icon-bell"></i>
                                </div>
                                <div class="metro_tmlabel" id="data5">

                                </div>
                            </li>
                            <li class="red">
                                <div class="metro_tmtime" datetime="2013-04-10 18:30">
                                <span class="date">1/4/13</span>
                                <span class="time">17:20</span> 
                                </div>
                                <div class="metro_tmicon">
                                    <i class="icon-bell"></i>
                                </div>
                                <div class="metro_tmlabel" id="data6">

                                </div>
                            </li>

my try so far

 //var colors = ["green", "purple", "yellow","gray","blue","red"];
                        //var arrayLength = colors.length;
            for(i in data) {

                        $( ".metro_tmlabael" ).empty();
                     htm += '<div class="metro_tmlabel" id="data"+j>'+'<h2>'+data[i].title + '</h2>'+'<br/>' + '<p>'+data[i].Activity+'</p>' +'</div>';
                      $('#data1').html(htm);
                      j++;
                      }

plz help

Recommended Answers

All 2 Replies

Goggle
document.createElement

and

Element.appendChild

You can dynamically build pretty much whatever you want in script.

And on a side note and off topic. The datetime attribute is specifically for the time element.

<time class="metro_tmtime" datetime="2013-04-10 18:30">
    <span class="date">1/4/13</span>
    <span class="time">17:20</span> 
</time>

https://schema.org/docs/gs.html#advanced_dates

commented: oh vow thanks +2
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.