javascript - Jquery .html without deleting element content -
good day guys.
my scenario want add new element ul li
on tab correspond own id. code working fine.. find .append slower .html... see in code if change .append
.html
display last loop... since .html
delete existing elements inside , replace new one...
what want display them via .html
regards id.
objects
groups = [{ groupid: 1, tabpaneid: "home" }, { groupid: 2, tabpaneid: "edit" }, { groupid: 3, tabpaneid: "view" }, { groupid: 4, tabpaneid: "home" }, { groupid: 5, tabpaneid: "home" } ]; items = [{ groupid: 1, item: "sampleitem1", qty: 21 }, { groupid: 1, item: "sampleitem2", qty: 21 }, { groupid: 2, item: "sampleitem3", qty: 22 }, { groupid: 3, item: "sampleitem4", qty: 23 }, { groupid: 4, item: "sampleitem5", qty: 24 }, { groupid: 4, item: "sampleitem6", qty: 25 }, { groupid: 5, item: "sampleitem7", qty: 25 }];
jquery
$.each(settings.tabs, function (i, t) { $.each(settings.group, function (objid, groupobj) { if (t.tabpaneid == groupobj.tabpaneid) { $tabpane.find("#" + t.tabpaneid).append("<ul class='delta-ui-common-ul' id=group-" + groupobj.groupid + "></ul>"); $.each(settings.item, function (itemid, itemobj) { if (groupobj.groupid == itemobj.groupid) { var list = $tabpane.find("#" + t.tabpaneid); list.find("#group-" + groupobj.groupid).append("<li>" + itemobj.item + "</li>"); } }); } }); });
because html() replaces have appending yourself, like:
var current_html = list.find("#group-"+groupobj.groupid).html(); list.find("#group-"+groupobj.groupid).html(current_html+"<li>"+itemobj.item+"</li>");
jquery.append() more adding text element jquery.html() quite bit faster.
Comments
Post a Comment