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 class = "box w-25 h-70 ">内返回。但我希望代码在五个DIV类之间随机化。

实施例

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

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

2 个答案: