时间戳

首页 > 解决方案 > 页面加载时在 Javascript/Jquery 中对引导模态体元素进行排序

javascript - 页面加载时在 Javascript/Jquery 中对引导模态体元素进行排序

问题描述

我正在处理来自 Bootstrap 模式的多行（ Row1 具有 def 并分配一个计算机部分，Row2 具有 abc 并分配一个计算机部分等）的小提琴。

此时，行未在模态中排序。我用来创建模式的 HTML/Bootstrap 代码是：

<div class="row-computerlabel form-group clearfix">
   <div class="editcomputerlabel col-sm-5">abc</div>
   <div class="assigncomputerlabel col-sm-5">
      <div class="btn-group bootstrap-select show-tick computerlabelscomputerselector">
         <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Assign a computer"><span class="filter-option pull-left">Assign a computer</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
         <div class="dropdown-menu open">
            <ul class="dropdown-menu inner" role="menu"></ul>
         </div>
         <select class="computerlabelscomputerselector selectpicker" multiple="" title="Assign a computer" tabindex="-98"></select>
      </div>
   </div>
   <div class="deletecomputerlabel col-sm-2"><button class="btn btn-link btn-delete" data-task="deletelabel" title="Delete group" type="button"><i class="fa fa-trash-o"></i></button></div>
</div>

问题陈述：

我想知道我需要在上面添加什么纯 Javascript 或 Jquery 代码，以便引导模式中的所有内容都得到排序，意思是 abc、def、jkl 文本应该首先显示在页面加载时分配的计算机中。

标签： javascriptjqueryhtmlbootstrap-modal

解决方案

您可以使用 JavaScript 的排序功能。

jQuery

 $(document).ready(function(){
  var rowComputer = $('.row-computerlabel');

    rowComputer.sort(function(a,b){
        var label1 = $(a).children('.editcomputerlabel').text();
        var label2 = $(b).children('.editcomputerlabel').text();
            return label1 >= label2;
    });
    rowComputer.appendTo('#computerlabeltable');
});

这段代码真的很简单。您在rowComputer变量中拥有所有行。

您对数组应用排序功能，并且需要指定排序条件（此处需要按字母顺序排序）。

最后，将包含行的数组附加到包含所有行的 div 中。

jsFiddle

这是一个 jFiddle 链接：http: //jsfiddle.net/Lqam4g2u/

推荐阅读