Question

How can I random elements order (link), so that they appear every case in other order? here is my js code:

$(document).ready(function(){    
  if ($.browser.msie && jQuery.browser.version.substr(0,1)<='6' && readCookie('already_submit')!=1) { 

    var iemessage = document.createElement("div");
      $(iemessage).addClass("ie-message");
      $('body').append(iemessage);   
      var frame = document.createElement("iframe");
        $(frame).addClass("nsframe");
        $(iemessage).append(frame);  

      var alerterror = document.createElement("div");
          $(alerterror).addClass("alert error");
          $(iemessage).append(alerterror);

      var close = document.createElement("div");
          $(close).addClass("close-text");
          $(alerterror).append(close);
          var textclose = document.createElement("div");
              $(textclose).addClass("text-img");
              $(textclose).text("close");
              $(close).append(textclose);

      var h2 = document.createElement("h2");
          $(h2).text("Sorry, your web-browser is outdated...");
          $(alerterror).append(h2);

      var h3 = document.createElement("h3");
          $(h3).text("Our site could be displayed not correctly in your browser.");
          $(alerterror).append(h3);

      var p = document.createElement("p");
          $(p).text("We recommend you install new version of web-browser:");
          $(alerterror).append(p);


      var browserslist = document.createElement("div");
          $(browserslist).addClass("browsers-list");
          $(iemessage).append(browserslist);

          var achrome = document.createElement("a");
              $(achrome).attr("href", "http://www.google.com/chrome");
              $(browserslist).append(achrome);
              var spanchrome = document.createElement("span");
                  $(spanchrome).addClass("browser-button chrome");
                  $(spanchrome).text("Google Chrome");
                  $(achrome).append(spanchrome);

          var afirefox = document.createElement("a");
              $(afirefox).attr("href", "http://www.mozilla.com/firefox/");
              $(browserslist).append(afirefox);
              var spanfirefox = document.createElement("span");
                  $(spanfirefox).addClass("browser-button firefox");
                  $(spanfirefox).text("Mozilla Firefox");
                  //$(afirefox).append(spanfirefox);

          var aopera = document.createElement("a");
              $(aopera).attr("href", "http://www.opera.com/download/");
              $(browserslist).append(aopera);
              var spanopera = document.createElement("span");
                  $(spanopera).addClass("browser-button opera");
                  $(spanopera).text("Opera");
                  //$(aopera).append(spanopera);

          var asafari = document.createElement("a");
              $(asafari).attr("href", "http://www.apple.com/safari/download/");
              $(browserslist).append(asafari);
              var spansafari = document.createElement("span");
                  $(spansafari).addClass("browser-button safari");
                  $(spansafari).text("Apple Safari");
                  $(asafari).append(spansafari);

          var aexplorer = document.createElement("a");
              $(aexplorer).attr("href", "http://www.microsoft.com/windows/Internet-explorer/default.aspx");
              $(browserslist).append(aexplorer);
              var spanexplorer = document.createElement("span");
                  $(spanexplorer).addClass("browser-button ie");
                  $(spanexplorer).text("Internet Explorer");
                  $(aexplorer).append(spanexplorer);           

    $(iemessage).toggle();
    $('.close-text').mouseover(function() {
        $('.close-text').css({"border-bottom":"1px solid #000"});
        $('.close-text').css({"color":"#959595"});
        $('.close-text').css({"background":"url(/assets/browsers/button-close-hover.png) 100% 100% no-repeat"});
    });  
    $('.close-text').mouseleave(function() {
        $('.close-text').css({"border-bottom":"none"});
        $('.close-text').css({"color":"#4e4e4e"});
        $('.close-text').css({"background":"url(/assets/browsers/button-close.png) 100% 100% no-repeat"});
    });   
    $('.close-text').click(function() {
        $('.ie-message').hide();
        createCookie('already_submit', 1, 0);
    });          
  }

  function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
  }

  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  }

  function eraseCookie(name) {
    createCookie(name,"",-1);
  }
});

How can I random elements order (link), so that they appear every case.
As you see I need to random this lines:

$(afirefox).append(spanfirefox);
$(aopera).append(spanopera);

and so other. How can I do this, using my code style?

Answer 1

Function to shuffle an array in place:

function shuffle(array) {
  var i = array.length;
  if(i > 1)
    while(--i) {
      var j = Math.floor(Math.random() * (i + 1));

      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }

  return array;
}

Add your afirefox, aopera and so on to an array:

var links = [afirefox, ..., aopera];

Append the shuffled list:

var $browserslist = $(browserslist);
$browserslist.append.apply(browserslist, shuffle(links));

EDIT: I removed my bad solution and instead suggest Fisher-Yates. See this interesting post on the matter – it seems to be exactly the same thing which you are doing.