如何使用JavaScript / JQuery对在导航栏折叠上创建的下拉菜单进行排序

Question

我有一个如下所示的自举导航栏，上面有下拉菜单。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" >
      <ul id="my-navbar-ul" class="nav navbar-nav">

      </ul>
    </div>
</div>

我稍后将元素添加到下拉菜单中，并希望它们以排序方式显示。 下面是我的代码：

$mynavbarul = $('#my-navbar-ul');

$mynavbarul.append('<li class= "dropdown">
                    <a rel="nofollow" href="#" class = "dropdown-toggle" data-toggle= "dropdown" role="button"  id = "namelist">Select a Name<span class ="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                    <li><a rel="nofollow" href="#" id="mark">Mark</a><li>
                    <li><a rel="nofollow" href="#" id="allan">Allan</a><li>
                    <li><a rel="nofollow" href="#" id="derek">Derek</a><li>
                    <li><a rel="nofollow" href="#" id="brian">BRIAN</a><li>
                    </ul>
                  </li>' );

列表中的名称都可以大写或小写。 我尝试了以下排序功能，并从编写上述代码的.js文件中显式调用它。 但是，排序机制似乎无法正常工作，并且卡在函数之间的某个位置。 我已经放置了调试语句来打印selectedValue，它作为空白出现。 我一定做错了什么。 下面是我的功能：

function sortDropDownListByText() {
    // Loop for each select element on the page.
    $("#namelist").each(function() {

        // Keep track of the selected option.
        var selectedValue = $(this).val();
        console.log("selected value = "+selectedValue); //coming as blank

        // Sort all the options by text. I could easily sort these by val.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }));

        // Select one option.
        $(this).val(selectedValue);
    });
}

任何帮助使其工作的方式将不胜感激。 谢谢。

Answer 1

我个人将值添加到数组中，使用内置函数对数组进行排序，然后创建一个循环，该循环将遍历数组中的所有值并创建列表项。

这已经进行了无数次，而且我敢肯定它也在Stack Overflow上。

Answer 2

如果这仅是对项目进行分类，则可能是这样。

（我认为列表项应带有结束标记）

<li><a rel="nofollow" href="#" id="mark">Mark</a></li> 

代替

<li><a rel="nofollow" href="#" id="mark">Mark</a><li>

您可以做的是获取ul id="my-navbar-ul"而不是a id = "namelist"的id = "namelist" 。

然后，您可以在<ul>找到列表项并将其存储。 从<ul>删除列表项，并对已存储的列表项进行排序。 循环存储的内容，并将其附加回<ul> 。

例：

 $mynavbarul = $('#my-navbar-ul'); var html = '<li class= "dropdown">'; html += '<a rel="nofollow" href="#" class = "dropdown-toggle" data-toggle= "dropdown" role="button" id = "namelist">Select a Name<span class ="caret"></span></a>'; html += '<ul class="dropdown-menu" role="menu">'; html += '<li><a rel="nofollow" href="#" id="mark">Mark</a></li>'; html += '<li><a rel="nofollow" href="#" id="allan">Allan</a></li>'; html += '<li><a rel="nofollow" href="#" id="derek">Derek</a></li>'; html += '<li><a rel="nofollow" href="#" id="brian">BRIAN</a></li>'; html += '</ul>'; html += '</li>'; $mynavbarul.append(html); function sortDropDownListByText() { var ul = $("#my-navbar-ul ul.dropdown-menu"); var listItems = ul.find("li"); ul.empty(); listItems.sort(function (a, b) { return $(a).children('a').first().html() < $(b).children('a').first().html() ? -1 : 1; }).each(function (index, value) { ul.append(value); }); } sortDropDownListByText(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse"> <ul id="my-navbar-ul" class="nav navbar-nav"> </ul> </div> </div> </nav> 

Answer 3

使用jQuery，您可以首先使用text/template类型的script将html代码移动到html文件，然后注意li的结束标记应为</li> 。

然后，您可以使用要排序的元素$list创建变量$list ，但是同时您可以使用$list = $mynavbarul.find('li ul.dropdown-menu').children('li').remove(); 。

然后，您使用JavaScript.prototype.sort（）进行排序，最后使用$dropdownMenu.append($list);进行排序$dropdownMenu.append($list); 再次用排序后的元素列表填充ul.dropdown-menu ，以提高性能。

码：

 var $mynavbarul = $('#my-navbar-ul'), $dropdownMenu = null, $list = null; $mynavbarul.append($('#list').html()); $dropdownMenu = $('ul.dropdown-menu'); $list = $mynavbarul.find('li ul.dropdown-menu').children('li').remove(); $list.sort(function (a, b) { var aId = $(a).find('a').attr('id').toUpperCase(), bId = $(b).find('a').attr('id').toUpperCase(); return aId > bId ? 1 : aId < bId ? -1 : 0; }); $dropdownMenu.append($list); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" > <ul id="my-navbar-ul" class="nav navbar-nav"></ul> </div> </div> <script id="list" type="text/template"> <li class="dropdown"> <a rel="nofollow" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="namelist"> Select a Name<span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a rel="nofollow" href="#" id="mark">Mark</a></li> <li><a rel="nofollow" href="#" id="allan">Allan</a></li> <li><a rel="nofollow" href="#" id="derek">Derek</a></li> <li><a rel="nofollow" href="#" id="brian">BRIAN</a></li> </ul> </li> </script>