snipt

Ctrl+h for KB shortcuts

JavaScript

Alphabetically sort elements

/**
 * Alphabetize elements.
 *
 * sort_container should be a jQuery object, like $(this) or $('ul')
 * sort_item should be a string, like '.form-item' or 'li'
 *
 * see also http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery#answer-1134983
 */
mukurtu.checkboxAlphaSort = function(sort_container, sort_item) {
  var list_items = sort_container.children(sort_item).get();
  list_items.sort(function(a, b) {
     return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
  });
  $.each(list_items, function(index, item) {
    sort_container.append(item);
  });
}
https://snipt.net/embed/9c509bf710bf64b5b0e67a517d018789/
/raw/9c509bf710bf64b5b0e67a517d018789/
9c509bf710bf64b5b0e67a517d018789
js
JavaScript
17
2019-07-21T11:48:17
True
False
False
/api/public/snipt/40129/
alphabetically-sort-elements
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="cm">/**</span> </span><span id="L-2"><a name="L-2"></a><span class="cm"> * Alphabetize elements.</span> </span><span id="L-3"><a name="L-3"></a><span class="cm"> *</span> </span><span id="L-4"><a name="L-4"></a><span class="cm"> * sort_container should be a jQuery object, like $(this) or $(&#39;ul&#39;)</span> </span><span id="L-5"><a name="L-5"></a><span class="cm"> * sort_item should be a string, like &#39;.form-item&#39; or &#39;li&#39;</span> </span><span id="L-6"><a name="L-6"></a><span class="cm"> *</span> </span><span id="L-7"><a name="L-7"></a><span class="cm"> * see also http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery#answer-1134983</span> </span><span id="L-8"><a name="L-8"></a><span class="cm"> */</span> </span><span id="L-9"><a name="L-9"></a><span class="nx">mukurtu</span><span class="p">.</span><span class="nx">checkboxAlphaSort</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sort_container</span><span class="p">,</span> <span class="nx">sort_item</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-10"><a name="L-10"></a> <span class="kd">var</span> <span class="nx">list_items</span> <span class="o">=</span> <span class="nx">sort_container</span><span class="p">.</span><span class="nx">children</span><span class="p">(</span><span class="nx">sort_item</span><span class="p">).</span><span class="nx">get</span><span class="p">();</span> </span><span id="L-11"><a name="L-11"></a> <span class="nx">list_items</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-12"><a name="L-12"></a> <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">a</span><span class="p">).</span><span class="nx">text</span><span class="p">().</span><span class="nx">toUpperCase</span><span class="p">().</span><span class="nx">localeCompare</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">b</span><span class="p">).</span><span class="nx">text</span><span class="p">().</span><span class="nx">toUpperCase</span><span class="p">());</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">});</span> </span><span id="L-14"><a name="L-14"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">list_items</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">item</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-15"><a name="L-15"></a> <span class="nx">sort_container</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span> </span><span id="L-16"><a name="L-16"></a> <span class="p">});</span> </span><span id="L-17"><a name="L-17"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
jquery, sort