JQuery每个函数赋予样式依赖于列表级别 - 已解决只需要解释

时间：2016-05-25 01:39:34

标签： javascript 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（）我需要翻译为<option>Text Value</option>而且每个层我需要添加类'tier' + Tier_Value所以我的示例代码会变成看起来像; 

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

更新我

在此更新之前，下拉列表显示了所有<li></li>的某些.text() .children()值，但我只想出一个if语句来解决此问题; if(!$(this).children("ul").length) {

更新II

我已经设法找到合适的资源来回答我自己的问题但是因为我不明白它是如何工作的，我现在还没有发布答案但是随时可以看看工作{{ 3}}并添加一些解释。 （忽略忽略跨度sext的部分，因为我理解这一部分）。

1 个答案:

答案 0 :(得分：0)

您可以使用递归函数处理每个列表，然后处理其子列表。

＆＃13;
＆＃13; 
$(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
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题