JavaScript循环打印HTML代码

我有以下HTML代码：

<div class="content">   

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

</article>

我的朋友们都很高兴
trazendo transtornos aos moradores

这是接收阵列的ajax：

$.ajax({

  type: "GET",
  url: "http://localhost/again/www/index.php",
  dataType: "json",

    success: function (data) {

        var tit = "";
        // Loop over each object
        for (var $i = 0; $i < data.length; $i++) {
            var object = data[$i];

            tit+=  object.titulo;


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

</script>

$.ajax({
键入：“获取”，
url:“http://localhost/again/www/index.php",
数据类型：“json”，
成功：功能（数据）{
var tit=“”；
//在每个对象上循环
对于（var$i=0；$i

---

现在，它在相同的HTML代码中插入所有内容（当然，因为我没有foreach），但我想为我收到的每一行（每个“tit”）显示此HTML…有人能帮我吗

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

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

$（'tit'）.html（tit）

然后在循环中放入以下内容：

$（'content-article:eq（+$i++'））.find（'tit'）.html（object.titulo）

只有当
$i
与相对于其父元素的元素索引相同时，这才有效。
我的理解是：您有一个包含要循环显示的文本的数组

如果这是您的阵列：

["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>

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
，创建一个
节点
，并将
节点
附加到包装器元素中

如果您有任何问题，请在下面留下评论，我会尽快回复您可以创建一个返回带有html标记的字符串的函数。如果需要填充html模板，则需要向该函数发送参数。下面是javascript的一个示例：


函数getHtml（标题）{
var html=“”；
html+=''；
html+=''；
html+=''；
html+=''；
html+='
我的朋友是克拉罗斯·杰斯特·哈亚·特拉泽多·特兰斯托诺斯·奥斯·莫拉多雷斯；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
返回html；
}
让事情井然有序的最佳方法是使用一个模板引擎，比如把手。我已经为您设置了一个JSFIDLE，它使用您提供的示例数据呈现您的文章（这需要一些格式才能正常工作）


以及您需要的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>


{{descripcao}

{{data}}

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

基本上是先为数据设置模板，然后循环数据并将每个项绑定到模板，然后将项目模板作为HTML附加到#articles容器中，并移动到下一个项目，直到完成。
是否要为每个结果生成新的项目块？@Dontfeedthecode是的，正是我想要的。为每个结果生成一篇新文章…你能粘贴一个在$.ajax函数中返回的JSON示例吗？@Dontfeedthecode我的ajax正在接收这样的JSON数组：[{“codigo”：“32”，“0”：“32”，“titulo”：“此处的某个标题”，“1”：“此处的某个标题”，“descripo”：“此处是我的描述”，“2”：“此处是我的描述”，“数据”：“2015-10-29 21:48:13”，“3”：“2015-10-29 21:48:13”l}，{“codigo”：“33”，“0”：“33”，“titulo”：这里的标题，“1”：这里的标题，“descripcao”：这里的描述，“2”：这里的描述，“数据”：“2015-10-30 20:45:46”，“3”：“2015-10-30 20:45:46”}]@不要为每个标题输入代码我想生成一篇文章…+1用于提供一个简单的方法，但是-1用于使用多个具有类似值的id，不，只是开玩笑。但是只是开玩笑关于-1，不是关于id！我正在尝试插入把手，但有一个错误->错误：GET Ok，现在我解决了获取把手存档的问题。但是现在，我的屏幕上没有显示任何内容…：/I没有收到任何错误。@AmandaPistolato您是否在希望您的文章出现的位置添加了一个id=“articles”的新div？@AmandaPistolato您可以将页面放到某个在线位置，以便我可以查看它吗？谢谢，但不可以，它只打印标题，我想为每个标题打印一张图片（），一个描述（即->
一个日期（2012年3月20日）和其他两张小图片（分别在“img/no-tick.png”和“img/apoio.png”中）。明白吗？同样的概念。。。只需乘以for循环以满足每个给定的标准，但是，我如何使用不是来自数据库的东西，html中的东西进行循环，就像我想为每个titulo（title）重复的那样？
document.getElementsByClassName（“elementsClassName”）
。。。这将返回一个包含所有元素的
数组。=）
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;
}

// 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));
});

<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>