Question

所以，我有这个代码：

function popAreaTree() {

        var tree = $("ol.tree");
        var list1 = tree.children('li');
        var list2 = list1.children('ol').children('li');


        $(tree).on('click', $(this).children('li').children('a'), function(e, i) {
            console.log($(this).text());
            $(this).parent('li').toggleClass('open', 300);
        });

        $.ajax({
            url: '../admin/callbacks/jsonDataList.php',
            data: {t: 'zoneandarea'},
            dataType:"json",
            async: false,
            global: false,
            success: function(j, status) {
                for(var i = 0;1 < j.length; i++) {

                    var li = tree.append('<li class="zone"><a href="#">'+j[i].name+'</a></li>');
                    var areas = '';
                    $.each(j[i].areas, function(i, item) {
                        areas += '<li class="area" data-area-uid="'+item.uid+'">'+item.name+'</li>';
                    });
                    $(areas).insertAfter(li.closest('a')); // This is the problem
                }
            }
        });
    }

它基本上只是创建一个文件树。 ajax发布到一个php页面，该页面输出一个json数组，每个结果中还有一个数组。它是这样的：

array('name'=>name, 'uid'=>uid, areas=>array('name'=>name, 'uid'=>uid))

我只需要知道如何在 li 对象中的 a 标记上执行insertAfter。

Answer 1

您可以创建一个html字符串并将其附加到tree对象：

var html = '<li class="zone"><a href="#">'+j[i].name+'</a>';
$.each(j[i].areas, function(i, item) {
    html += '<li class="area" data-area-uid="'+item.uid+'">'+item.name+'</li>';
});
html += '</li>'; //close first li element

tree.append(html);

顺便说一下，您的问题必须与closest的使用有关，后者会查找与选择器匹配的最近的父。您可能希望使用children来搜索元素的直接子元素。

Answer 2

您可以在里面查找锚点，然后使用.after()：

li.children('a').after(areas);

虽然在这种情况下你也可以使用.append()：

li.append(areas); // this will go behind <a>

jQuery：获取对象内的元素

2 个答案: