i'm trying create slide out panel that'll act table of contents form has lot of fields. have loop seems pull in things randomly except text fields twice:
my code
var toc = "<div id='sticky-anchor'></div><div id='sticky'><a href='#toc'>☰ table of contents</a></div><nav role='navigation' id='toc' class='table-of-contents'><a href='#'>x close</a>" + "<ul>"; var newline, el, title, link; jquery(".form-wrapper").each(function() { el = jquery(this).find('input'); ellabel = jquery(this).find('label:first'); title = ellabel.text(); link = "#" + el.attr("id"); newline = "<li>" + "<a href='" + link + "'>" + title + "</a>" + "</li>"; toc += newline; }); toc += "</ul>" + "</nav>"; jquery(".page-node-add-application #page").prepend(toc); }); edit: looks duplicates caused jquery select2 plugin.
i think single quotes or double quotes error, don't know cause can create jquery object after append, hope you
var $nav=$("<nav>").attr({ "role":"navigation", "id":"toc", "class","table-of-contents" }); var $a=$("<a href='#'>").text("x close"); var $ul=$("<ul>"); $nav.append($a); $nav.append($ul); //var toc = "<div id='sticky-anchor'></div><div id='sticky'><a href='#toc'>☰ table of contents</a></div><nav role='navigation' id='toc' class='table-of-contents'><a href='#'>x close</a>" + "<ul>"; var newline, el, title, link; jquery(".form-wrapper").each(function() { el = jquery(this).find('input'); ellabel = jquery(this).find('label:first'); title = ellabel.text(); link = "#" + el.attr("id"); var $li= $("<li>"); var $aa=$("<a>").attr("href",link); $li.append($aa); $ul.append($li); /* newline = "<li>" + "<a href='" + link + "'>" + title + "</a>" + "</li>"; toc += newline; */ }); //toc += "</ul>" + "</nav>"; var $divanch=$("<div id='sticky-anchor'>"); var $divsticky=$("<div id='sticky'>"); var $atoc=$("<a href='#toc'>").html("☰ table of contents"); $divsticky.append($atoc); jquery(".page-node-add-application #page").append($divanch); jquery(".page-node-add-application #page").append($divsticky); jquery(".page-node-add-application #page").prepend($nav); });