Databases
StackOverflow2013
Postsdbo
POGroup li into ul based on dash '-'
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGroup li into ul based on dash '-'
    text
    copied!<p>I got a code dropdown like this:</p> <pre><code>&lt;select id="Folder" name="Folder"&gt; &lt;option value="0"&gt;Top Folder&lt;/option&gt; &lt;option value="11"&gt;2nd Folder 01&lt;/option&gt; &lt;option value="17"&gt;---3rd Folder 01-01&lt;/option&gt; &lt;option value="18"&gt;---3rd Folder 01-02&lt;/option&gt; &lt;option value="383"&gt;------4th Folder 01-02-01&lt;/option&gt; &lt;option value="384"&gt;---------5th Folder 01-02-01-01&lt;/option&gt; &lt;option value="385"&gt;---------5th Folder 01-02-01-02&lt;/option&gt; &lt;option value="386"&gt;---------5th Folder 01-02-01-03&lt;/option&gt; &lt;option value="387"&gt;---------5th Folder 01-02-01-04&lt;/option&gt; &lt;option value="388"&gt;---------5th Folder 01-02-01-05&lt;/option&gt; &lt;option value="19"&gt;---3rd Folder 03&lt;/option&gt; &lt;option value="20"&gt;---3rd Folder 04&lt;/option&gt; &lt;option value="22"&gt;---3rd Folder 05&lt;/option&gt; &lt;option value="130"&gt;------5th Folder 01-02-05-01&lt;/option&gt; &lt;option value="131"&gt;------5th Folder 01-02-05-02&lt;/option&gt; &lt;option value="132"&gt;------5th Folder 01-02-05-03&lt;/option&gt; &lt;option value="133"&gt;------5th Folder 01-02-05-04&lt;/option&gt; &lt;option value="134"&gt;------5th Folder 01-02-05-05&lt;/option&gt; &lt;option value="398"&gt;------5th Folder 01-02-05-06&lt;/option&gt; &lt;option value="158"&gt;2nd Folder 02&lt;/option&gt; &lt;option value="257"&gt;---3rd Folder 02-01&lt;/option&gt; &lt;option value="258"&gt;---3rd Folder 02-02&lt;/option&gt; &lt;option value="259"&gt;---3rd Folder 02-03&lt;/option&gt; &lt;option value="16"&gt;2nd Folder 03&lt;/option&gt; &lt;option value="382"&gt;---3rd Folder 03-01&lt;/option&gt; &lt;option value="51"&gt;---3rd Folder 03-02&lt;/option&gt; &lt;option value="113"&gt;------4th Folder 03-02-01&lt;/option&gt; &lt;option value="125"&gt;------4th Folder 03-02-02&lt;/option&gt; &lt;/select&gt; </code></pre> <p>And I jquery convert them into a list: </p> <pre><code> &lt;script type="text/javascript"&gt;//&lt;![CDATA[ $(window).load(function(){ $(function() { var $yearFilter = $("#Folder"); $yearFilter.find("option").map(function() { var $this = $(this); return $("&lt;li&gt;").attr("value",$this.attr("value")).text($this.text()).get(); }).appendTo($("&lt;ul&gt;").attr({ id: $yearFilter.attr("id"), name: $yearFilter.attr("name") })).parent().replaceAll($yearFilter); }); });//]]&gt; &lt;/script&gt; </code></pre> <p>Which gives me this:</p> <pre><code> &lt;ul id="Folder" name="Folder"&gt; &lt;li value="0"&gt;Top Folder&lt;/li&gt; &lt;li value="11"&gt;2nd Folder 01&lt;/li&gt; &lt;li value="17"&gt;---3rd Folder 01-01&lt;/li&gt; &lt;li value="18"&gt;---3rd Folder 01-02&lt;/li&gt; &lt;li value="383"&gt;------4th Folder 01-02-01&lt;/li&gt; &lt;li value="384"&gt;---------5th Folder 01-02-01-01&lt;/li&gt; &lt;li value="385"&gt;---------5th Folder 01-02-01-02&lt;/li&gt; &lt;li value="386"&gt;---------5th Folder 01-02-01-03&lt;/li&gt; &lt;li value="387"&gt;---------5th Folder 01-02-01-04&lt;/li&gt; &lt;li value="388"&gt;---------5th Folder 01-02-01-05&lt;/li&gt; &lt;li value="19"&gt;---3rd Folder 03&lt;/li&gt; &lt;li value="20"&gt;---3rd Folder 04&lt;/li&gt; &lt;li value="22"&gt;---3rd Folder 05&lt;/li&gt; &lt;li value="130"&gt;------5th Folder 01-02-05-01&lt;/li&gt; &lt;li value="131"&gt;------5th Folder 01-02-05-02&lt;/li&gt; &lt;li value="132"&gt;------5th Folder 01-02-05-03&lt;/li&gt; &lt;li value="133"&gt;------5th Folder 01-02-05-04&lt;/li&gt; &lt;li value="134"&gt;------5th Folder 01-02-05-05&lt;/li&gt; &lt;li value="398"&gt;------5th Folder 01-02-05-06&lt;/li&gt; &lt;li value="158"&gt;2nd Folder 02&lt;/li&gt; &lt;li value="257"&gt;---3rd Folder 02-01&lt;/li&gt; &lt;li value="258"&gt;---3rd Folder 02-02&lt;/li&gt; &lt;li value="259"&gt;---3rd Folder 02-03&lt;/li&gt; &lt;li value="16"&gt;2nd Folder 03&lt;/li&gt; &lt;li value="382"&gt;---3rd Folder 03-01&lt;/li&gt; &lt;li value="51"&gt;---3rd Folder 03-02&lt;/li&gt; &lt;li value="113"&gt;------4th Folder 03-02-01&lt;/li&gt; &lt;li value="125"&gt;------4th Folder 03-02-02&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>However, what I want to achieved is:</p> <pre><code> &lt;ul id="Folder"&gt; &lt;li&gt;Top Folder&lt;/li&gt; &lt;li&gt;2nd Folder 01 &lt;ul class="something01"&gt; &lt;li&gt;3rd Folder 01-01&lt;/li&gt; &lt;li&gt;3rd Folder 01-02 &lt;ul&gt; &lt;li&gt;4th Folder 01-02-01 &lt;ul class="something01-02-01"&gt; &lt;li&gt;5th Folder 01-02-01-01&lt;/li&gt; &lt;li&gt;5th Folder 01-02-01-02&lt;/li&gt; &lt;li&gt;5th Folder 01-02-01-03&lt;/li&gt; &lt;li&gt;5th Folder 01-02-01-04&lt;/li&gt; &lt;li&gt;5th Folder 01-02-01-05&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;3rd Folder 03&lt;/li&gt; &lt;li&gt;3rd Folder 04&lt;/li&gt; &lt;li&gt;3rd Folder 05 &lt;ul class="something05"&gt; &lt;li&gt;5th Folder 01-02-05-01&lt;/li&gt; &lt;li&gt;5th Folder 01-02-05-02&lt;/li&gt; &lt;li&gt;5th Folder 01-02-05-03&lt;/li&gt; &lt;li&gt;5th Folder 01-02-05-04&lt;/li&gt; &lt;li&gt;5th Folder 01-02-05-05&lt;/li&gt; &lt;li&gt;5th Folder 01-02-05-06&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;2nd Folder 02 &lt;ul class="something02"&gt; &lt;li&gt;3rd Folder 02-01&lt;/li&gt; &lt;li&gt;3rd Folder 02-02&lt;/li&gt; &lt;li&gt;3rd Folder 02-03&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;2nd Folder 03 &lt;ul class="something03"&gt; &lt;li&gt;3rd Folder 03-01&lt;/li&gt; &lt;li&gt;3rd Folder 03-02 &lt;ul&gt; &lt;li&gt;4th Folder 03-02-01&lt;/li&gt; &lt;li&gt;4th Folder 03-02-02&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>So what I wondering is if there is a way to group all the 2nd, 3rd etc levels into a ul group based on the dash '-'. Or do I have to give each li a class then group from there?</p>
 

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