0

jqueryを使用してjsonコンテンツのループを作成し、コンテンツを構造化されたhtmlとして追加しようとしています。以下のコード例では、ジェイソンを必要な場所にプラグインしたいだけです。私の問題は、レビューの数によっては、html 構造を再作成するためのループを取得できないことです。

例: 3 つのレビューがある場合、それらのレビューをループして、コンテンツの 3 つの個別の HTML 構造を表示したいと考えています。

これが可能であることを誰かが知っていますか？

<script type="text/javascript">
$.ajax({
    url: 'http:this-is-a-url-with-json-in-it.com',
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(data){
        if ( data.length == 0 ) {
            alert('nothing in it');
        } else {
            $(data.Results).each(function(index,element){
                $('.reviewContentBox').html(
                    '<div class="col-md-2 pull-left author_details">' +
                        '<h5>'+ 'VeryLongUserNameHere' + '</h5>' +
                        '<h5>' + '<img src="#imgAssetURL#blue_ribbon.png" alt="">' + 'TOP 1000 CONTRIBUTOR' + '</h5>' +
                        '<em class="bio">' + 'Age:' + 'over' + '65' + 'Gender:' + 'Female' + '</em>' + 
                    '</div>' +
                    '<div class="col-md-10 pull-left border_left">' +
                        '<div class="col-md-9">' +
                            '<div class="ratings">' + '<img src="#imgAssetURL#stars_large.png" alt="">' + '<em>' + '4' + '</em>' + '</div>' +
                            '<h4>' + 'Nullam quis risus eget urna mollis ornare vel eu leo.' + '</h4>' +
                            '<em class="date">' + 'Date 00, 2013' + '</em>' +
                            '<p>' + element.ReviewText + '</p>' +

                            '<strong>' + 'Cons:' + '</strong>' + 'Nisi erat porttitor ligula.' + '</p>' +
                            '<div class="found_helpful">' + '<em class="count">' + '147 of 150 people found the following review helpful' + '</em>' +
                                '<ul>' +
                                    '<li>' + '<a href="##">' + '<img src="#imgAssetURL#fb_btn.png" alt="">' + '</a>' + '</li>' +
                                    '<li>' + '<a href="##" class="btn_small">' + '<img src="#imgAssetURL#right_icon.png" alt="">' + 'helpful' + '<span class="no">' + '0' + '</span>' + '</a>' + '</li>' +
                                    '<li>' + '<a href="##" class="btn_small">' + '<img src="#imgAssetURL#wrong_icon.png" alt="">' + 'unhelpful' + '<span class="no">' + '0' + '</span>' + '</a>' + '</li>' +
                                    '<li>' + '<a href="##">' + '<img src="#imgAssetURL#no_icon.png" alt="">' + '</a>' + '</li>' +
                                '</ul>' +
                            '</div>' +
                        '</div>' +
                        '<div class="col-md-3 fit_guide">' +
                            '<ul>' +
                                '<li>' +
                                    '<div class="bar">' + '<span class="drag">' + '</span>' + '</div>' +
                                    '<span class="pull-left">' + 'Runs Small' + '</span>' + '<span class="pull-right">' + 'Runs Big' + '</span>' +
                                '</li>' +
                                '<li>' +
                                    '<div class="bar">' + '<span class="drag">' + '</span>' + '</div>' +
                                    '<span class="pull-left">' + 'Runs Small' + '</span>' + '<span class="pull-right">' + 'Runs Big' + '</span>' +
                                '</li>' +
                            '</ul>' +
                        '</div>' +
                    '</div>'
                );

            });
        }
    }
});

4

1 に答える 1

0

上記のコメントで Mark E のソリューションを試した後、必要なのは .html() を .append() に置き換えることだけであることに気付きました。この理由は、.html() が、append によって追加されるすべてのループでコンテンツを上書きしていたためです。助けてくれてありがとう、マーク。

<script type="text/javascript">
$.ajax({
    url: 'http://put-your-url-here',
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(data){
        if ( data.length == 0 ) {
            alert('nothing in it');
        } else {

            $(data.Results).each(function(index,element){
                $('.reviewContentBox').append(
                    '<div class="col-md-2 pull-left author_details">' +
                        '<h5>'+ 'VeryLongUserNameHere' + '</h5>' +
                        '<h5>' + '<img src="#imgAssetURL#blue_ribbon.png" alt="">' + 'TOP 1000 CONTRIBUTOR' + '</h5>' +
                        '<em class="bio">' + 'Age:' + 'over' + '65' + 'Gender:' + 'Female' + '</em>' + 
                    '</div>' +
                    '<div class="col-md-10 pull-left border_left">' +
                        '<div class="col-md-9">' +
                            '<div class="ratings">' + '<img src="#imgAssetURL#stars_large.png" alt="">' + '<em>' + '4' + '</em>' + '</div>' +
                            '<h4>' + element.Title + '</h4>' +
                            '<em class="date">' + moment().format('DD/MM/YYYY' , element.LastModificationTime) + '</em>' +
                            '<p>' + element.ReviewText + '</p>' +

                            '<strong>' + 'Cons:' + '</strong>' + element.Cons + '</p>' +
                            '<div class="found_helpful">' + '<em class="count">' + '147 of 150 people found the following review helpful' + '</em>' +
                                '<ul>' +
                                    '<li>' + '<a href="##">' + '<img src="#imgAssetURL#fb_btn.png" alt="">' + '</a>' + '</li>' +
                                    '<li>' + '<a href="##" class="btn_small">' + '<img src="#imgAssetURL#right_icon.png" alt="">' + 'helpful' + '<span class="no">' + '0' + '</span>' + '</a>' + '</li>' +
                                    '<li>' + '<a href="##" class="btn_small">' + '<img src="#imgAssetURL#wrong_icon.png" alt="">' + 'unhelpful' + '<span class="no">' + '0' + '</span>' + '</a>' + '</li>' +
                                    '<li>' + '<a href="##">' + '<img src="#imgAssetURL#no_icon.png" alt="">' + '</a>' + '</li>' +
                                '</ul>' +
                            '</div>' +
                        '</div>' +
                        '<div class="col-md-3 fit_guide">' +
                            '<ul>' +
                                '<li>' +
                                    '<div class="bar">' + '<span class="drag">' + '</span>' + '</div>' +
                                    '<span class="pull-left">' + 'Runs Small' + '</span>' + '<span class="pull-right">' + 'Runs Big' + '</span>' +
                                '</li>' +
                                '<li>' +
                                    '<div class="bar">' + '<span class="drag">' + '</span>' + '</div>' +
                                    '<span class="pull-left">' + 'Runs Small' + '</span>' + '<span class="pull-right">' + 'Runs Big' + '</span>' +
                                '</li>' +
                            '</ul>' +
                        '</div>' +
                    '</div>'
                );

            });
        }
    }
});

于 2013-11-08T16:29:50.837 に答える