{"id":2869,"date":"2013-09-18T20:01:51","date_gmt":"2013-09-18T20:01:51","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=2869"},"modified":"2014-06-25T18:48:14","modified_gmt":"2014-06-25T18:48:14","slug":"sort-lists-with-javascript","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/sort-lists-with-javascript\/","title":{"rendered":"Sort Lists with JavaScript"},"content":{"rendered":"<p>This solution requires jQuery and Underscore.<\/p>\n<pre>var wnt = {};\r\n\r\nwnt.sortList = {\r\n    asc: function(sList){\r\n        sListItems = $(sList).find('li');\r\n        sListItems = _.sortBy(sListItems, function(item){\r\n            return $(item).text();\r\n        });\r\n        $(sList).html(sListItems);\r\n    },\r\n    desc: function(sList){\r\n        sListItems = $(sList).find('li');\r\n        sListItems = _.sortBy(sListItems, function(item){\r\n            return $(item).text();\r\n        }).reverse();\r\n        $(sList).html(sListItems);\r\n    }\r\n};\r\n\r\nwnt.sortToggle = \"asc\";\r\n$('ul').click(function(){\r\n    wnt.sortList[wnt.sortToggle]($(this));\r\n    wnt.sortToggle==='asc' ? wnt.sortToggle=\"desc\" : wnt.sortToggle=\"asc\";\r\n});\r\n<\/pre>\n<h2>Fiddle<\/h2>\n<p><iframe loading=\"lazy\" src=\"http:\/\/jsfiddle.net\/webninjataylor\/Srh2T\/embedded\/result\" width=\"100%\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This solution requires jQuery and Underscore. var wnt = {}; wnt.sortList = { asc: function(sList){ sListItems = $(sList).find(&#8216;li&#8217;); sListItems = _.sortBy(sListItems, function(item){ return $(item).text(); }); $(sList).html(sListItems); }, desc: function(sList){ sListItems = $(sList).find(&#8216;li&#8217;); sListItems = _.sortBy(sListItems, function(item){ return $(item).text(); }).reverse(); $(sList).html(sListItems); } }; wnt.sortToggle = &#8220;asc&#8221;; $(&#8216;ul&#8217;).click(function(){ wnt.sortList[wnt.sortToggle]($(this)); wnt.sortToggle===&#8217;asc&#8217; ? wnt.sortToggle=&#8221;desc&#8221; : wnt.sortToggle=&#8221;asc&#8221;; }); Fiddle<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[9,27,88],"class_list":["post-2869","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-javascript","tag-jquery","tag-underscore-js"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=2869"}],"version-history":[{"count":6,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2869\/revisions"}],"predecessor-version":[{"id":3445,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2869\/revisions\/3445"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=2869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=2869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=2869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}