Tim Marshall Tim Marshall - 6 months ago 7
Javascript Question

JQuery Each Function Give Style Dependant On List Level - Resolved just needs explaining

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



<ul class="inbox-nav" id="inbox-nav">
<li class="active">
<a href="javascript:;" data-type="inbox" data-title="Inbox">
<div class="Arrow"></div> Inbox
<span class="badge badge-success">3</span>
</a>
<ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
<li>
<a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
<ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
<ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 2</a></li>
</ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
</ul>
</li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a></li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a></li>
</ul>
</li>
<li>
<a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
</li>
<li>
<a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
</li>
<li>
<a href="javascript:;" data-type="draft" data-title="Draft"> Draft
<span class="badge badge-danger">8</span>
</a>
</li>
<li>
<a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
<span class="badge badge-info">23</span>
</a>
</li>
<li>
<a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
<span class="badge badge-warning">2</span>
</a>
</li>
<li>
<a href="javascript:;" data-type="inbox" data-title="News"> News </a>
</li>
</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.

var listItems = $(".inbox-nav").find("li");
$('.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;

<select>
<option>Sub-Folder 1</option>
<option>Sub-Folder 2</option>
<option>Sub-Folder 3</option>
<option class="tier1">Sub-Folder 1</option>
<option class="tier2">Sub-Folder 1</option>
<option class="tier2">Sub-Folder 2</option>
<option class="tier1">Sub-Folder 2</option>
<option>Sub-Folder 4</option>
<option>Sub-Folder 5</option>
...
</select>


My Best Attempt So Far:





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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul class="inbox-nav" id="inbox-nav" style="display:none;">
<li class="active">
<a href="javascript:;" data-type="inbox" data-title="Inbox">
<div class="Arrow"></div> Inbox
<span class="badge badge-success">3</span>
</a>
<ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
<li>
<a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
<ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
<ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 2</a></li>
</ul>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
</ul>
</li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a></li>
<li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a></li>
</ul>
</li>
<li>
<a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
</li>
<li>
<a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
</li>
<li>
<a href="javascript:;" data-type="draft" data-title="Draft"> Draft
<span class="badge badge-danger">8</span>
</a>
</li>
<li>
<a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
<span class="badge badge-info">23</span>
</a>
</li>
<li>
<a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
<span class="badge badge-warning">2</span>
</a>
</li>
<li>
<a href="javascript:;" data-type="inbox" data-title="News"> News </a>
</li>
</ul>

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





UPDATE I



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) {


UPDATE II



I have managed to find the right resources to answer my own question as such however as I do not understand how it works, I'm not posting an answer at the moment but feel free to take a look at the working JSFiddle and add a bit of explaining. (Ignore the part where it ignores the span sext as I do understand this part).

Answer

You can use a recursive function to process each list and then its sub-lists.

$(function() {
	var options = processList($('#inbox-nav'), 0); // Compile options starting at #inbox-nav
  $('.Alpha').html('<select>' + options + '</select>'); // Create and add select box
  
  function processList(list, level) { // Recursive function
    var options = '';
    list.children('li').each(function() { // For each child li
      options += '<option' + (level ? ' class="tier' + level + '"' : '') + '>' +
        $(this).children('a').text() + '</option>'; // Add an option for this li
      var subList = $(this).children('ul'); // Find any embedded list
      if (subList.length) { // If there is a sub-list
        options += processList(subList, level + 1); // Compile options starting at that list, and on the next level
      }
    });
    return options; // Return the compile options
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <ul class="inbox-nav" id="inbox-nav" style="display:none;">
        <li class="active">
            <a href="javascript:;" data-type="inbox" data-title="Inbox">
                <div class="Arrow"></div> Inbox
                <span class="badge badge-success">3</span>
            </a>
            <ul>
            <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
            <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
            <li>
                <a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
                <ul>
                    <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
                    <ul>
                        <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
                        <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 2</a></li>
                    </ul>
                    <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
                </ul>
            </li>
            <li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a></li>
            <li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
        </li>
        <li>
            <a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
        </li>
        <li>
            <a href="javascript:;" data-type="draft" data-title="Draft"> Draft
                <span class="badge badge-danger">8</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
                <span class="badge badge-info">23</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
                <span class="badge badge-warning">2</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" data-type="inbox" data-title="News"> News </a>
        </li>
    </ul>
    
    <div class="Alpha"></div>

Comments