JQuery Each Function Give Style Dependant On List Level

JQuery Each Function Give Style Dependant On List Level

List Example;

  • Inbox
    • Sub-Folder 1
    • Sub-Folder 2
    • Sub-Folder 3
      • Sub-Folder 1
        • Sub-Folder 1
        • Sub-Folder 2
      • Sub-Folder 2
    • Sub-Folder 4
    • Sub-Folder 5
  • Important
  • Sent
  • Draft
  • Trash
  • Promotions
  • News

List Example Source


  1.     <ul class="inbox-nav" id="inbox-nav">
  2.         <li class="active">
  3.             <a href="javascript:;" data-type="inbox" data-title="Inbox">
  4.                 <div class="Arrow"></div> Inbox
  5.                 <span class="badge badge-success">3</span>
  6.             </a>
  7.             <ul>
  8.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
  9.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
  10.             <li>
  11.                 <a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
  12.                 <ul>
  13.                     <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
  14.                     <ul>
  15.                         <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
  16.                         <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 2</a></li>
  17.                     </ul>
  18.                     <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
  19.                 </ul>
  20.             </li>
  21.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a></li>
  22.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a></li>
  23.             </ul>
  24.         </li>
  25.         <li>
  26.             <a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
  27.         </li>
  28.         <li>
  29.             <a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
  30.         </li>
  31.         <li>
  32.             <a href="javascript:;" data-type="draft" data-title="Draft"> Draft
  33.                 <span class="badge badge-danger">8</span>
  34.             </a>
  35.         </li>
  36.         <li>
  37.             <a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
  38.                 <span class="badge badge-info">23</span>
  39.             </a>
  40.         </li>
  41.         <li>
  42.             <a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
  43.                 <span class="badge badge-warning">2</span>
  44.             </a>
  45.         </li>
  46.         <li>
  47.             <a href="javascript:;" data-type="inbox" data-title="News"> News </a>
  48.         </li>
  49.     </ul>

Question


On this list, the user can create as many sub-folders as they wish. I need to loop through this list and create a `<select><option...` drop down list showing this list.
  1.     var listItems = $(".inbox-nav").find("li");
  2.     $('.foo').prepend($(listItems).html());

I know I can duplicate my list however for each li .text() I need to translate to `<option>Text Value</option>` and furthermore each tier I need to add the class `'tier' + Tier_Value` so my example code would turn out to look like;

  1.     <select>
  2.       <option>Sub-Folder 1</option>
  3.       <option>Sub-Folder 2</option>
  4.       <option>Sub-Folder 3</option>
  5.       <option class="tier1">Sub-Folder 1</option>
  6.       <option class="tier2">Sub-Folder 1</option>
  7.       <option class="tier2">Sub-Folder 2</option>
  8.       <option class="tier1">Sub-Folder 2</option>
  9.       <option>Sub-Folder 4</option>
  10.       <option>Sub-Folder 5</option>
  11.       ...
  12.     </select>


My Best Attempt So Far:


  1.     var sel = $('<select />');
  2.     $('.Alpha').prepend('<select />');
  3.     $('.inbox-nav li').each( function( index ) {
  4.       if(!$(this).children("ul").length) {
  5.         $('.Alpha select').append('<option>' + $(this).text() + '</option>');
  6.       }
  7.     });


  10.     <ul class="inbox-nav" id="inbox-nav" style="display:none;">
  11.         <li class="active">
  12.             <a href="javascript:;" data-type="inbox" data-title="Inbox">
  13.                 <div class="Arrow"></div> Inbox
  14.                 <span class="badge badge-success">3</span>
  15.             </a>
  16.             <ul>
  17.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
  18.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
  19.             <li>
  20.                 <a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
  21.                 <ul>
  22.                     <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
  23.                     <ul>
  24.                         <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
  25.                         <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 2</a></li>
  26.                     </ul>
  27.                     <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
  28.                 </ul>
  29.             </li>
  30.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a></li>
  31.             <li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a></li>
  32.             </ul>
  33.         </li>
  34.         <li>
  35.             <a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
  36.         </li>
  37.         <li>
  38.             <a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
  39.         </li>
  40.         <li>
  41.             <a href="javascript:;" data-type="draft" data-title="Draft"> Draft
  42.                 <span class="badge badge-danger">8</span>
  43.             </a>
  44.         </li>
  45.         <li>
  46.             <a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
  47.                 <span class="badge badge-info">23</span>
  48.             </a>
  49.         </li>
  50.         <li>
  51.             <a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
  52.                 <span class="badge badge-warning">2</span>
  53.             </a>
  54.         </li>
  55.         <li>
  56.             <a href="javascript:;" data-type="inbox" data-title="News"> News </a>
  57.         </li>
  58.     </ul>

  60.     <div class="Alpha"></div>


UPDATE:


Previously prior this update, the drop down was showing certain `<li></li>` `.text()` values from all their `.children()` however I've just figured out an if statement to resolve this; `if(!$(this).children("ul").length) {`