Databases
StackOverflow2013
Postsdbo
POjQuery: How should I structure a new list that's generated by jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: How should I structure a new list that's generated by jQuery
    text
    copied!<p><em>edit: This question is about jQuery refactoring. Basically I have a big block of code but I want to see if other folks can think of a better way to refactor it. Since I'm new to jQuery I'm not sure if I'm on the right track or not with my design</em></p> <p><em>original post:</em> I'm working on a bookmarklet which adds HTML elements to the page. I'm building a sidebar which is a div with a ul inside of it. I'm trying to keep my styles separate from my code and to also write things so that they will be easy to manage if I need to make changes in the future. Is it possible to refactor this code to make it cleaner/more efficient?</p> <pre><code>myObj = { $sidebar: {}, createSidebar: function () { var self = this, $undo = {}, $redo = {}, $email = {}, $reset = {} self.$sidebar = $("&lt;div id='myObj-sidebar'&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;"); $undo = $('&lt;a&gt;&lt;/a&gt;', { id: 'sidebar-undo', className: 'sidebar-item', href: '#', text: 'Undo', click: function (e) { //self.doUndo(); e.preventDefault(); } }); $redo = $('&lt;a&gt;&lt;/a&gt;', { id: 'sidebar-redo', className: 'sidebar-item', href: '#', text: 'Redo', click: function (e) { //self.doRedo(); e.preventDefault(); } }); $email = $('&lt;a&gt;&lt;/a&gt;', { id: 'sidebar-change-email', className: 'sidebar-item', href: '#', text: 'Change E-Mail', click: function (e) { //self.createEmailDialog(); e.preventDefault(); } }); $reset = $('&lt;a&gt;&lt;/a&gt;', { id: 'sidebar-reset-all', className: 'sidebar-item', href: '#', text: 'Reset All', click: function (e) { //self.doReset(); e.preventDefault(); } }); self.$sidebar.find('ul').append($undo, $redo, $email, $reset); self.$sidebar.find('.sidebar-item').wrap('&lt;li/&gt;'); self.$sidebar.appendTo("body"); } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload