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.