jquery - 如何让 jQuery 输出不同的 DIV 类？

Question

我在 jQuery 中有一个脚本，可以从http://pi.codele.se/php/debatt.php（json格式）检索数据。它在http://pi.codele.se/debatt.html?page=1<div id="output">内部返回。正如您在fetch/fetch.js中看到的那样，它在. 但我希望代码在五个 DIV 类之间随机化。<div class = "box w-25 h-70 ">

前任。

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

获取/获取.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.')
        }
    });
});