是否可以循环使用html结构并使用jQuery和json多次显示它

Question

我正在尝试使用jquery在json内容上创建一个循环，并将内容附加为结构化html。使用下面的示例代码，我只想将jason插入我需要的地方。我的问题是我无法根据有多少评论来重新创建html结构。

一个例子：如果我有三个评论，我想循环这些评论并为内容显示三个单独的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>'
                );

            });
        }
    }
});

Answer 1

在上面的评论中通过Mark E解决方案后，我意识到我需要做的就是用.append（）替换.html（）。原因是.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>'
                );

            });
        }
    }
});