0

jQuery Mobile (1.3.1) を使用して写真を 2 列のグリッドに表示しようとしています。API から写真を取得するために Ajax を使用しています。レンダリング時にグリッド内の div が正しいクラスを持っていることを確認するにはどうすればよいですか? 以下では、クラスを ui-block-a と ui-block-b にローテーションする必要があります。前もって感謝します！

$.ajax({
    url: server_url + "get-photos", 
    type: "post", 
    data: 'album_id=' + album_id, 
    dataType: 'json', 
    crossDomain: true,  
    error: function() {
        $('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
    },
    success: function(data) {
        if (data.response === "true") {
            $("#album_photos").append('<div class="ui-grid-a">');
            $.each(data, function(i, item) {
                $("#album_photos").append('<div class="ui-block-a"><img src="' + data.photo_url + album_user + '/thumbnail/' + data.album_photo + '" width="75px" /></div>');
            });​
            $("#album_photos").append('</div>');
        } else {
            $('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
        }
    }
});
4

2 に答える 2

0

これは、背骨の片側のみ「ui-block-a」を設定することによるものです。2 番目の列を作成するには、div に「ui-block-b」も設定する必要があります。

返された umagen の数を数え、2 つの配列に分割することをお勧めします。

各配列に 1 つずつ、2 つのループを使用して、列「ui-block-a」と「ui-block-b」を埋めます。

または、2 つの配列テポラリオを設定したくない場合は、$ を使用しません。それぞれ、単純な FOR ループを使用して、最初に半分に開始し、結果を最初の列「ui-block-a」に配置し、2 番目のループで最終結果を 2 番目の列「ui-block-b」に配置します。

于 2013-07-05T00:21:55.657 に答える