jquery - 将循环中的 jquery/ajax 数据作为 HTML 输出到 div

Question

我已经从 servlet 中检索了一些数据，现在想要输出为 HTML 到名为“showArticles”的 div，并且每个值都有相同的 html 块。但是，它只输出一个值。所以我有：

|Article Title.   |
|Article content. |

我希望有很多这样的 html。先感谢您。

阿贾克斯：

$.ajax({
        url : "LoadArticlesByTag",
        dataType : 'json',
        type: 'GET',
        data: {
            b_sub_tag:option_value
        },
        error : function(jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        },
        success : function(data){
           var data1=data[0], data2=data[1];
           for(var i=0;i<data1.length;i++){
            outputToDiv(data1,i);
           }
        }

    });


function outputToDiv(data1,i) {                
            $('#showArticles').html(                
            "<article class='one_quarter'>"+
                "<figure><img src='images/demo/32x32.gif' width='32' height='32' alt=''></figure>"+
                "<strong>"+data1[i]["name"]+"</strong>"+
                "<p>"+data1[i]["content"]+"</p>"+
                "<p class='more'><a href='#'>Read More &raquo;</a></p>"

                );
        }

Answer 1

很简单，.html() 替换目标选择器的内容。尝试使用.append().

$('#showArticles').append(...)

永远记得检查文档以了解当函数没有按您期望的那样工作时它们是如何工作的。

Answer 2

由于 use ，#showArticles您每次调用时都会覆盖内容。如果要保留当前内容，则需要将其添加到开始使用或结束使用。outputToDiv.html().prepend().append()

$('#showArticles').append(
     "<article class='one_quarter'>"+
     "<figure><img src='images/demo/32x32.gif' width='32' height='32' alt=''></figure>"+
     "<strong>"+data1[i]["name"]+"</strong>"+
     "<p>"+data1[i]["content"]+"</p>"+
     "<p class='more'><a href='#'>Read More &raquo;</a></p>");