如何讓jQuery輸出不同的DIV類？

Question

我有一個jQuery腳本，從http://pi.codele.se/php/debatt.php（json格式）中檢索數據。它在<div id="output">內返回http://pi.codele.se/debatt.html?page=1。正如您在fetch/fetch.js中看到的那樣，它將在<div class = "box w-25 h-70 ">內返回。但是我想讓代碼在五個DIV類之間隨機化。

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.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

像這樣的事情？

$(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.') 
     } 
    }); 
}); 

Answer 2

$(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-'+i+'h-'+i+1+'"><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.') 
     } 
    }); 
});