Question

Sorry for the bad title, but anyway. I have a jQuery script that retrieves data from a PHP file located on a server. The script is called fetch/debatt.js and prints all data in one <div class="classy"> on http://pi.codele.se/debatt.html, but I want it to be up to five different classes on each outputted DIV (one output á entry).

1st DIV tag = class="first"
2nd DIV tag =  class="secondDiv"
3rd DIV tag = class="niels"
4th DIV tag = class="hotdog"
5th DIV tag = class="last"

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="classy"><div class="img-cont img-4" style="background-image: url('+item.bild+');"></div><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

You could try this. The classes are in an array and the each takes the i as key and outputs the corresponding class from the array.

$(document).ready(function(){
    var classes = ['class','class2','class3','class4','class5'];
    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="'+classes[i]+'"><div class="img-cont img-4" style="background-image: url('+item.bild+');"></div><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.')
        }
    });
});