Question

我一直在努力解决通过javascript和jQuery将动态UL和LI添加到网页的问题，并且我很难过。

我几乎有一个解决方案，但它没有添加样式，也没有将每个UL放在一个单独的行上。我觉得我创建的标签没有关闭，但我不确定。

我的最终目标是将每个JSON行作为单独的UL并在单独的行上显示，其中第一个名称+姓氏+电话号码作为每个UL的列表项并显示为表格（不使用表格））。除了通过Javascript动态添加的内容之外，没有内联样式和HTML标记。

我得到了以下代码作为起点，但我的解决方案肯定偏离了一点。我搜索了几个小时，到目前为止你可以看到我在下面的jsfiddle链接中的最佳尝试。非常感谢任何帮助。

function showContacts(data){
    var markup = "";
    $("body").html(markup);
};

$(document).ready(function myFunction() {
    var jsonText = '[ {"firstname":"Bill","lastname":"Gates","phone":"123-456-7891"}, {"firstname":"Steve","lastname":"Jobs","phone":"198-765-4321"}, {"firstname":"Kevin","lastname":"Spencer","phone":"007-008-0099"}, {"firstname":"David","lastname":"Zimmerman","phone":"800-256-6321"}, {"firstname":"Bert","lastname":"Ernie","phone":"127-624-1138"}, {"firstname":"Guy","lastname":"Lafleur","phone":"806-797-4213"} ]';
    showContacts(jsonText);
});

https://jsfiddle.net/bkweLctq/embedded/result/

Answer 1

你错过了element创作。您的odd＆amp; even类样式也需要更改。

更新了js

function showContacts(data) {
    var markup = "";
    var jo = $.parseJSON(data);
    console.log(jo);

var $body = $('body');

var _html = '';

    for(var i = 0; i<jo.length; i++){
        if((i+1)%2 == 0 ){
            _html += '<ul class="even">';
        }else {
            _html += '<ul class="odd">';
        }

        var _index = 0;
        $.each(jo[i], function(k,n) {
            if((_index+1)%2 == 0 ){
                _html += '<li class="even"> '+ n +' </li>'
            }else {
                _html += '<li class="odd"> '+ n +' </li>'
            }
            _index++;
        });
        _html += '</ul>';
    }

    $body.html(_html);
};

$(document).ready(function myFunction() {
    var jsonText = '[ {"firstname":"Bill","lastname":"Gates","phone":"123-456-7891"}, {"firstname":"Steve","lastname":"Jobs","phone":"198-765-4321"}, {"firstname":"Kevin","lastname":"Spencer","phone":"007-008-0099"}, {"firstname":"David","lastname":"Zimmerman","phone":"800-256-6321"}, {"firstname":"Bert","lastname":"Ernie","phone":"127-624-1138"}, {"firstname":"Guy","lastname":"Lafleur","phone":"806-797-4213"} ]';
    showContacts(jsonText);
});

I have also updated your fiddlejs link

Javascript / JQuery动态UL故障

1 个答案: