jQuery：获取对象内的元素

Question

So, I've got this code:

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

It is just basically creating a file tree. The ajax posts to a php page that outputs a json array with one more array inside each result. It goes like this:

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

I just need to know how to do an insertAfter on the a tag within the li object.

Answer 1

You could just create an html string and append that to your tree object:

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

As an aside, your issue has to due with your usage of closest, which looks for the closest parent that matches the selector. You would want to use children which just searches through the direct children of the element.