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