Question

I have a script in jQuery that retrieves data from http://pi.codele.se/php/debatt.php (json-formatted). And it’s returned in <div id="output"> inside http://pi.codele.se/debatt.html?page=1. As you can see in the fetch/fetch.js, it returns inside a <div class = "box w-25 h-70 ">. But I want the code to randomise between five DIV classes.

Ex.

<div class="box w-25 h-70">
<div class="box 2">
<div class="box 3">
<div class="box 4">
<div class="box 5">

fetch/fetch.js

$(document).ready(function(){
    var output = $('#output');

    $.ajax({
        url: 'http://pi.codele.se/php/debatt.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 
                var content = '<div class="box w-25 h-70"><h3>'+item.rubrik+'<span>Publicerad '+ item.datum+'</span></h3>'
                + '<p>'+item.innehall+'<br></div></div>';       
                output.append(content);
            });
        },
        error: function(){
            output.text('Kolla din anslutning.')
        }
    });
});

Answer 1

Something like this?

$(document).ready(function(){
    var output = $('#output');
    var classes = ['box w-25 h-70', 'box2', ...]

    $.ajax({
        url: 'http://pi.codele.se/php/debatt.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 

                var arr_idx = Math.floor(Math.random()*classes.length);
                var content = '<div class="' + classes[arr_idx] + '"><h3>'+item.rubrik+'<span>Publicerad '+ item.datum+'</span></h3>'
                + '<p>'+item.innehall+'<br></div></div>';       
                output.append(content);
            });
        },
        error: function(){
            output.text('Kolla din anslutning.')
        }
    });
});