JQuery каждая функция дать стиль зависит от уровня списка-решены просто необходимо объяснить

Пример Списка;

  • Входящие
    • Подпапка 1
    • Подпапка 2
    • Подпапка 3
      • Подпапка 1
        • Подпапка 1
        • Подпапка 2
      • Подпапка 2
    • Подпапка 4
    • Подпапка 5
  • Важный
  • Отправленный
  • Проект
  • Мусор
  • Рекламные акции
  • Новости

Пример Списка Источник

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

Вопрос

В этом списке пользователь может создать столько подпапок, сколько пожелает. Мне нужно пройти через этот список и создать <select><option...выпадающий список, показывающий этот список.

var listItems = $(".inbox-nav").find("li");
$('.foo').prepend($(listItems).html());

Я знаю, что могу дублировать свой список для каждого li .text() I need to translate to <option>Text Value</option>and furthermore each tier I need to add the class 'tier' + Tier_Valueso 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>

Моя Лучшая Попытка До Сих Пор:

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>

ОБНОВЛЕНИЕ I

Ранее, до этого обновления, выпадающее меню показывало определенные <li></li> .text()значения из всех их.children(), однако я только что выяснил оператор if, чтобы решить эту проблему; if(!$(this).children("ul").length) {

ОБНОВЛЕНИЕ II

Мне удалось найти правильные ресурсы, чтобы ответить на мой собственный вопрос как таковой, однако, поскольку я не понимаю, как это работает, я не публикую ответ на данный момент, но не стесняйтесь взглянуть на рабочий JSFiddle и добавить немного объяснений. (Игнорировать часть, где он игнорирует span sext, как я понимаю эту часть).

1 ответ

  1. Можно использовать рекурсивную функцию для обработки каждого списка, а затем его вложенных списков.

    $(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>