Geek Answers Handbook

Get one script to loop through multiple variables

I have a page that rates the 15 best websites on the Internet (from Alexa) and it uses javascript to write new ratings, but it is very inefficient. There are 6 variables for each rating. And he writes one code block for each rating using variables. Is there a way to do this with one block of code to write all 15 ratings? Here is the code:

var topID1 = 1; var topWidth1 = 100; var topPageURL1 = 'www.google.com' var topPageTitle1 = 'Google'; var topRate1 = rateStar9; var topMargin1 = 0; $('#topSites1').html('<div class="meter-wrap" style="margin-top: ' + topMargin1 + 'px;"><div class="meter-value" style="background-color: ' + topSitesBack + '; width: ' + topWidth1 + '%;"><div class="meter-text"><span class="toplist"><span class="topnum">' + topID1 + '. </span><span class="favico" id="ico1"><img src="img/blank.gif" style="width:16px;height:16px;"></img></span><a href="http://' + topPageURL1 + '/">' + topPageTitle1 + '</a><span class="rating" style="width: ' + topRate1 + 'px;"><img src="img/blank.gif" style="width:100%;height:16px;"></img></span></span></div></div></div>'); $('#ico1').css('background', 'url(' + topPageFavicon + topPageURL1 + ') no-repeat');

(repeat as 15 times)

+4
source share
4 answers

Called using a javascript object. than you can repeat through the object to get information:

 var all_ratings = { 'GOOGLE': { topID: 1, topWidth: 100, topPageURL: 'something', topPageTitle: 'something_else', topRate: rateStar, topMargin: 'something' }, 'YAHOO': { topID: 1, topWidth: 100, topPageURL: 'something', topPageTitle: 'something_else', topRate: rateStar, topMargin: 'something' }, ..MORE }

How can you do this (using $.each ): (since I believe you are using jQuery):

 $.each(all_ratings, function (index, item) { var outerDiv = $('<div>', { 'class': 'meter-wrap', style: 'margin-top: ' + item.topMargin + 'px;' }), innerDiv = $('<div class="meter-value" style="background-color: ' + topSitesBack + '; width: ' + item.topWidth + '%;">').html('<div class="meter-text"><span class="toplist"><span class="topnum">' + item.topID + '. </span><span class="favico" id="ico1"><img src="img/blank.gif" style="width:16px;height:16px;"></img></span><a href="http://' + item.topPageURL + '/">' + item.topPageTitle + '</a><span class="rating" style="width: ' + item.topRate + 'px;"><img src="img/blank.gif" style="width:100%;height:16px;"></img></span></span></div>'); innerDiv.appendTo(outerDiv); $('#topSites').append(outerDiv); })

script: http://jsfiddle.net/maniator/QWAhV/

side note : instead of using topPageTitle you can simply use the index variable, which will return the page that you went to, for example "GOOGLE" or "YAHOO", a fiddle for that: http://jsfiddle.net/maniator/QWAhV/8/

+4
source

Manipulating the DOM, which is known to be rather slow. You can try things like:

  • cache your link to $('#topSites1') , so jQuery doesn't need to search for it every time.
  • Disconnect the node from the DOM, add material to it, then reconnect it when it is ready. This will reduce the number of DOM updates and possibly demonstrate a decent performance improvement. For this you need to use jQuery detach() methods and then appendTo()
+1
source

You need to use a loop using each function: jquery.each ()

0
source

Allows you to clean it with OO, an old school style.

First define the TopEntry class:

 function TopEntry(id, width, pageURL, pageTitle, rate, margin, sitesBack, pageFavicon) { this.id = id; this.width = width; this.pageURL = pageURL; this.pageTitle = pageTitle; this.rate = rate; this.margin = margin; this.sitesBack = sitesBack; this.pageFavicon = pageFavicon; this.createDiv = function() { return $('<div class="meter-wrap" style="margin-top: ' + this.margin + 'px;"><div class="meter-value" style="background-color: ' + this.sitesBack + '; width: ' + this.width + '%;"><div class="meter-text"><span class="toplist"><span class="topnum">' + this.id + '. </span><span class="favico" id="ico' + this.id + '"><img src="img/blank.gif" style="width:16px;height:16px;"></img></span><a href="http://' + this.pageURL + '/">' + this.pageTitle + '</a><span class="rating" style="width: ' + this.rate + 'px;"><img src="img/blank.gif" style="width:100%;height:16px;"></img></span></span></div></div></div>') } }

Then let's declare an array and create some TopEntry objects:

 // create some array var sites = new Array(); // Create object var site = new TopEntry(1, 100, 'www.google.com', 'Google', rateStar9, 0, 'white', 'http://www.google.com/favicon.ico'); // push the object into the array sites.push(site);

And finally, the code for adding a div (given that you do this at boot time):

 // Manipulate DOM: Following Neal append Approach $(document).ready(function(){ $.each(sites, function (index, item) { $('#topSites').append(item.createDiv()); $('#ico' + item.id).css('background', 'url(' + item.pageFavicon + ') no-repeat'); }); });

As for markup, all you need is a div acting as a container:

 <div id="topSites"></div>

And of course, no javascript response will be complete without jsfiddle: http://jsfiddle.net/Q8duz/2/

Well, it's him;).

0
source

More articles:


All Articles