3

我和 $.each 不是好朋友，我似乎无法弄清楚我应该如何使用这个语句来打印我的 JSON 文件中的所有数据。另一个问题是 if 语句，我尝试了很多方法，但无论我做什么，都没有打印数据。

我的 JSON 文件

[
{
"expo":"pit",
"datum":"05.06.2011 - 05.06.2016",
"img":"images/pit_home.jpg",
"link":"exp1_index.html"
},
{
"expo":"Space Odessy 2.0",
"datum":"17.02 - 19.05.2013",
"img":"images/so_home.jpg",
"link":"exp2_index.html"
}
]

我的 $.getJSON 脚本

<script type="text/javascript">
    function read_json() {
        $.getJSON("home.json", function(data) {
            var el = document.getElementById("kome");
            el.innerHTML = "<td><a href=" + data.link + " data-ajax='false'><img src=" + data.img + "><div class='dsc'>" + data.expo + "<br><em>" + data.datum + "</em></div></a></td>";
        });
    }
</script>

那么我将如何整合 $.each 语句并与 if 语句分开呢？

4

3 回答 3

5

尝试这个

$.getJSON("home.json", function (data) {
    var html = '',
        el = document.getElementById("kome");
    $.each(data, function (key, val) {

         html += "<td><a href=" + val.link + " data-ajax='false'><img src=" + val.img + "><div class='dsc'>" + val.expo + "<br><em>" + val.datum + "</em></div></a></td>";
    });
    el.innerHTML = html;
});
于 2013-06-21T00:44:25.617 回答
1

像这样的东西？

<script type="text/javascript">
    function read_json() {
        $.getJSON("home.json", function(data) {
            var html = '';
            $.each(data, function(i, record) {
                html += '' +
                '<td>' +
                    '<a href="' + record.link + '" data-ajax="false">' +
                        '<img src="' + record.img + '">' +
                        '<div class="dsc">' +
                            record.expo + '<br>' +
                            '<em>' + record.datum + '</em>' +
                        '</div>' +
                    '</a>' +
                '</td>';
            });
            $('#kome').html(html);
        });
    }
</script>

注意：我没有对此进行测试，因此可能存在一些语法错误（主要关注字符串连接中的引号）。

我会注意到你不需要 jQuery 的 $.each ；您可以使用基本的 for 循环：

for (var i = 0; i < data.length; i++) {
    var record = data[i];
    ... stuff...
}

不过，在遍历 DOM 中的元素时， jQuery.each()确实很有用。例如，如果你想用 class 遍历元素dsc，你可以这样做：

$('.dsc').each(function(i, dsc) {
    // Do stuff to the $(dsc) element.
});

$('#kome')此外，如果您打算使用 jQuery ，不妨使用 jQuery 的选择器 (the )。

jQuery 的 API通常有可靠的例子。这是一个这样的案例。

于 2013-06-21T00:48:07.483 回答
1

$.each 可以迭代数组 [] 或对象 {}，您的 json 包含两者，所以首先您需要处理数组，这会在每次迭代时为您提供一个对象。然后你可以访问它的属性。 jQuery 每个文档

第二件事：附加到 innerHTML 使用“+=”而不是“=”，否则您将在每次迭代时重置 html。

var el = document.getElementById("kome");
$.getJSON('ajax/test.json', function(data) { 
    $.each(data, function(n, linkData) {
        el.innerHTML += '<a href="' + linkData.link + '">' + linkData.expo + '</a>';
    });
}
于 2013-06-21T00:51:23.403 回答