Question

我有一个数据库中的记录，其中包含每条记录的父子数据。我试图创建父子列表，但我在创建子列表时遇到问题：

$(document).ready(function() {
    var objCategories = new Object ({
        id: 0
    });
    $('#load-structures').click(function(event) {
        event.preventDefault();
        objCategories.id = $(this).attr("data-category");
        categories();
    });
    function categories() {
        $(".flash").show();
        $(".flash").fadeIn(400).html("Loading...");
            $.ajax({
                url: base_url + "notes/jq_get_structures/" + objCategories.id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (element) {
                    $(".flash").hide();
                    $(".load-link").addClass("link-none");
                    for (var i=0;i<element.length;i++) {
                        if (element[i].parent == 0) {
                            $("#links-structures-parents").append('<li id="structure-parent-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
                        } else if (element[i].parent > 0) {
                            if ($('#structure-children-' + element[i].structure_id).length) {
                                $("#structure-children-" + element[i].structure_id).append('<li id="structure-child-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
                            } else {
                                $("#structure-parent-" + element[i].structure_id).html('<ul id="structure-children-' + element[i].structure_id + '">');
                                $("#structure-parent-" + element[i].structure_id).html('<li id="structure-child-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
                                $("#structure-parent-" + element[i].structure_id).html('</ul>');
                            }
                        }
                    }
                },
                error: function () {
                    $("#links-structures-parents").empty();
                    $("#links-structures-parents").append('<li>There are no Structures.</li>');
                }
            }
        );
    }
});

数据本身没有问题，而是我试图创建子列表的条件部分。

我有一些example code，虽然在我的生活中，我无法在本地运行数据，但我希望有人知道这是什么伎俩。

Answer 1

你在else语句中的代码重写了html代码，所以最后一次调用只是让元素有</ul>，你需要用新的部分添加以前的html代码或者一次性完成所有操作。

else {
    var eleobj = $("#structure-parent-" + element[i].structure_id);
    eleobj.html('<ul id="structure-children-' + element[i].structure_id + '">');
    eleobj.html(eleobj.html()+'<li id="structure-child-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
    eleobj.html(eleobj.html()+'</ul>');

    //Though you could do this in one call
    eleobj.html(
        '<ul id="structure-children-' + element[i].structure_id + '">'+
        '<li id="structure-child-' + element[i].structure_id + '">'+
        '<a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>' +
        '</li></ul>'
    );
}

Answer 2

好的，最后，这是父子ID属性的问题：

$(document).ready(function() {
    var objCategories = new Object ({
        id: 0
    });
    $('#load-structures').click(function(event) {
        event.preventDefault();
        objCategories.id = $(this).attr("data-category");
        categories();
    });
    function categories() {
        $(".flash").show();
        $(".flash").fadeIn(400).html("Loading...");
            $.ajax({
                url: base_url + "notes/jq_get_structures/" + objCategories.id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (element) {
                    $(".flash").hide();
                    $(".load-link").addClass("link-none");
                    for (var i=0;i<element.length;i++) {
                        if (element[i].parent == 0) {
                            $("#links-structures-parents").append('<li id="structure-parent-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>');
                        } else if (element[i].parent > 0) {
                            var htmlElementParent = $("#structure-parent-" + element[i].parent);
                            var htmlElementChild = $("#structure-children-" + element[i].parent);
                            var htmlElementChildren = $("ul#structure-children-" + element[i].parent + " li");
                            if (htmlElementChildren.length == 0) {
                                htmlElementParent.append(
                                    '<ul id="structure-children-' + element[i].parent + '">' +
                                    '<li id="structure-child-' + element[i].structure_id + '">' +
                                    '<a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>' +
                                    '</li></ul>'
                                );
                            } else if (htmlElementChildren.length > 0) {
                                htmlElementChild.append(
                                    '<li id="structure-child-' + element[i].structure_id + '">' +
                                    '<a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>' +
                                    '</li>'
                                );
                            }
                        }
                    }
                    $("#load-structures").hide();
                },
                error: function () {
                    $("#links-structures-parents").empty();
                    $("#links-structures-parents").append('<li>There are no Structures.</li>');
                }
            }
        );
    }
});

在这里，您将看到我附加到id编号包含父值的未编号列表，然后将列表项提供给各自的正确无编号列表。

附加到动态元素？

2 个答案: