JavaScript循环打印HTML代码

我所理解的是：您有一个包含要循环并显示的文本的数组。

如果这是你的阵列：

["Text 1", "Text 2", "Text 3", "Text 4", "Text 5"]

然后你希望这个显示

<element>Text 1</element>
<element>Text 2</element>
<element>Text 3</element>
<element>Text 4</element>
<element>Text 5</element>

代码中的问题

我在代码中看到的问题是，您使用的是jquery的.html(arrayItem)，它将覆盖元素内的任何现有文本。

相反，看看我的解决方案：(http://jsfiddle.net/ProgrammerKid/v6upsLp8/)

HTML

<div id="tit"></div>

JavaScript

$(document).ready(function () {
    var tit = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5"];
    for (var i in tit) {
        var element = document.createElement("h2");
        element.innerHTML = tit[i];
        $("#tit").append(element);
    }
});

在这里，我们使用jQuery的.append，创建一个node，并将node附加到包装器元素中。

如果你有任何问题，请在下面留言，我会尽快回复

保持事物有序的最佳方法是使用模板引擎，如车把。我已经为您设置了一个jsfiddle，它使用您提供的示例数据来呈现您的文章（需要一些格式才能开始工作）。

http://jsfiddle.net/4ud6rLfq/10/

// This is what you'll need to get the data via AJAX
var source   = $("#template").html();
var template = Handlebars.compile(source);
$.ajax({
    type: "GET",
    url: "http://localhost/again/www/index.php",
    dataType: "json",
    success: function (data) {
        $.each(data, function(key, value) {
            $('#articles').append(template(value));
        });
    }
});
// A demo using the data you provided (formatted a bit)
var data = [
    {
        "codigo":"32",
        "titulo":"Some title here",
        "descricao":"Here is my description",
        "data":"2015-10-29 21:48:13"
    },{
        "codigo":"33",
        "titulo":"Title here",
        "descricao":"description here",
        "data":"2015-10-30 20:45:46"
    }
];
var source   = $("#template").html();
var template = Handlebars.compile(source);
$.each(data, function(key, value) {
    $('#articles').append(template(value));
});

以及您需要的HTML：

<script id="template" type="text/x-handlebars-template">
    <article class="underline">
        <a href="#">
             <img class="incidente" src="" alt="{{titulo}}" />
        </a>
        <h2><a href="#">{{titulo}}</a></h2>
        <p class="desc">{{descricao}}</p>
        <p></p>
        <div class="date" class="date">{{data}}</div>
        <img class="tick" alt="não resolvido" src="img/no-tick.png">
        <img class="apoio" alt="apoiar" src="img/apoio.png">
    </article>
</script>
<div id="articles"></div>

有一个使用$.ajax函数的例子被注释掉了，下面还有一个使用数据变量的例子——你所需要做的就是在jQuery之后在你的页面中包含把手，这应该很好。您可以编辑模板中的变量，以匹配通过ajax传递回脚本的任何变量。

基本上，首先要为数据设置模板，然后循环数据并将每个项目绑定到模板，然后将项目模板以HTML形式附加到#articles容器中，然后移动到下一个项目，直到完成。

如果我理解你的意思，你有多篇文章，你想动态更改它们的标题吗？

如果是这样，首先你应该删除；

$('#tit').html(tit);

然后在循环中放入：

$('#content article:eq('+$i+')').find('#tit').html(object.titulo);

只有当$i与相对于其父元素的元素索引相同时，这才有效。

您可以创建一个函数，返回带有html标记的字符串。如果需要填充html模板，则需要向该函数发送params。以下是javascript的一个示例：

http://jsfiddle.net/fnLjcfvr/1/

function getHtml(title){
    var html = "";
    html += '<div class="content">';
    html += '';
    html += '<article class="underline">';
    html += '<a href="incidente.html"><img id="incidente"';  
    html += 'src="img/buraco.jpg" alt="Incidente" /></a>';
    html += '<h2><a href="basic_markup.html" id="tit"> + ' title ' + </a></h2>';
    html += '<p id="desc">Esse buraco na rua Montes Claros já está há 1 ano          trazendo transtornos aos moradores</p><p></p>';
    html += '<div class="date" id="date"></div>';
    html += '<img class="tick" alt="não resolvido" src="img/no-tick.png">';
    html += '<img class="apoio" alt="apoiar" src="img/apoio.png">';
    html += '';
    html += '</article>';
    return html;
}