I'm creating a data-driven list with jquery. I can't figure out how to add multiple children to a parent element using jQuery's method for creating HTML elements. What am I missing here?
I've re-organized the <a>
elements inside the so they all can be a new element inside the rendered <td>
. Instead it every "html" key overwrites the previous key and only the last "html" key and value are rendered. In this case the "a#deleteModal" element is the only one rendered.
This is what I need it to print:
<ul class="list-10" style="">
<li data-info="line91" name="documentationmenunull">
<table width="100%">
<tbody>
<tr>
<td>
<a href="#" data-toggle="dropdownArrow" data-target="documentationmenu1"><i class="fa fa-minus-square-o"></i></a>
<a href="#" class="editItem" data-target="documentation_1" data-type="Documentation" id="adocumentationmenu1">Main</a>
<a href="#deleteModal"><span class="fa fa-trash-o deleteMenuItem" rel="tooltip" title="" data-original-title="Delete"></span></a>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
This is how I'm trying to accomplish that:
function getList(item, $list) {
if (item) {
if (item.title) {
$list.append($("<li/>", {
"name": "documentationMenu",
"html": $("<table/>", {
"width": "100%",
"html": $("<tbody/>", {
"html": $("<tr/>", {
"html": $("<td/>", {
"html": $("<a/>", {
"href": '#',
"data-toggle": "dropdownArrow",
"data-target": "documentationMenu" + item.id,
"html": $("<i/>", {
"class": "fa fa-minus-square-o"
}),
}),
"html": $("<a/>", {
"href": '#',
"data-toggle": "dropdownArrow",
"data-target": "documentation_" + item.id,
"data-type": "documentation",
"id": "aDocumentationMenu" + item.id,
"html": item.title
}),
"html": $("<a/>", {
"href": '#deleteModal',
"html": $("<span/>", {
"class": "fa fa-trash-o deleteMenuItem",
"data-toggle": "tooltip",
"title": "Delete"
})
})
})
})
})
})
}));
}
if (item.children) {
var $sublist = $("<ul/>");
$.each(item.children, function(key, value) {
getList(value, $sublist);
});
$list.append($sublist);
}
}
}
Essentially you can ignore the last if block for item.children. I just need to figure out how to place several anchor tags inside the <td>
. Any ideas?
See Question&Answers more detail:
os