`

jQuery排序li,Sorting elements with jQuery

阅读更多
/**
 * jQuery.fn.sortElements
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *   
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *   
 *   E.g. $('td').sortElements(comparator, function(){
 *      return this.parentNode; 
 *   })
 *   
 *   The <td>'s parent (<tr>) will be sorted instead
 *   of the <td> itself.
 */
jQuery.fn.sortElements = (function(){
 
    var sort = [].sort;
 
    return function(comparator, getSortable) {
 
        getSortable = getSortable || function(){return this;};
 
        var placements = this.map(function(){
 
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
 
                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
 
            return function() {
 
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
 
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
 
            };
 
        });
 
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
 
    };
 
})();


<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>


$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});


That would result in:
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>
分享到:
评论

相关推荐

    jquery纵向排序 网格排序 拖动排序 插件

    《jQuery纵向排序与网格排序拖动插件详解》 在Web开发中,用户交互体验的提升是至关重要的一环,而动态排序功能就是其中的一种常见需求。jQuery作为一个强大的JavaScript库,为开发者提供了丰富的功能来实现这样的...

    排序算法一览-排序(Sorting)是计算机程序设计中的一种重要操作

    排序(Sorting)是计算机程序设计中的一种重要操作,其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个项值有序的序列。作为排序依据的数据项称为“排序码”,也即数据元素的关键码。为了便于查找,通常...

    php+jquery拖曳排序

    在Web开发中,拖曳排序(Drag and Drop Sorting)是一种常见的交互功能,允许用户通过鼠标拖动元素来改变它们的顺序。在这个“php+jquery拖曳排序”的主题中,我们将探讨如何结合PHP后端和jQuery前端库实现这一功能...

    selection sorting选择排序,c++

    生成一个可以控制上下界限的随机数列,并使用选择排序selection sorting算法对其排序。

    拓扑排序 Topological Sorting 两种实现

    拓扑排序的两种实现

    jquery 表格排序

    `jquery 表格排序`就是一种利用jQuery实现的表格数据排序功能,使得用户可以方便地对表格中的数据进行升序或降序排列。 jQuery表格排序插件`tablesorter`是这个场景下的一个优秀解决方案。它提供了丰富的功能和...

    快速排序sorting

    - 在内存在排序过程中所需的空间较少,因为它是原地排序(In-place Sorting)。 - 相较于其他O(n log n)算法,快速排序在实际应用中通常更快,因为它有较低的常数因子。 然而,快速排序也有一些缺点: - 最坏情况下...

    JavaScript-使用javascript开发的排序算法-sorting.zip

    在这个"JavaScript-使用javascript开发的排序算法-sorting.zip"压缩包中,很可能是包含了各种常见的排序算法实现,比如冒泡排序、插入排序、选择排序、快速排序、归并排序以及堆排序等。 1. **冒泡排序**:冒泡排序...

    30个jquery经典Demo

    22. **表格排序(Table Sorting)**:结合插件,jQuery可以实现表格数据的排序功能。 23. **响应式设计(Responsive Design)**:利用jQuery检测窗口尺寸变化,实现响应式布局。 24. **图片懒加载(Lazy Loading)...

    jQuery插件MixItUp图片分类过滤排序

    2. **排序(Sorting)**:根据不同的标准对元素进行排序,可以是升序或降序,甚至可以根据自定义的规则进行排序。例如,按照图片的上传时间、大小或名称排序。 3. **混合(Mixing)**:MixItUp的命名来源于其独特的...

    jquery easyui 增删改查、排序

    5. **排序(Sorting)**: EasyUI的`datagrid`支持对数据进行排序,只需设置`sortable`属性为`true`,用户就可以点击列头进行升序或降序排序。同时,你还可以通过`onSortColumn`事件监听排序动作,实现服务器端排序。...

    jQuery-ui Demo 官方UI插件

    拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果: 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序(table sorters)...

    PHP-使用php实现的排序算法-Sorting.zip

    "Sorting.zip"压缩包文件包含了一系列使用PHP实现的排序算法,这对于我们深入理解PHP编程和算法优化具有很高的学习价值。 首先,排序算法是用来对一组数据进行排列的逻辑过程,它可以是升序或降序,常见的排序算法...

    JQuery-tableDnD 拖拽的基本使用 Table Drag and Drop JQuery plugin

    在压缩包中的`Drag-Drop-Table-Plugin-with-jQuery-TableDnD`文件夹中,包含了完整的示例代码,包括HTML、CSS和JavaScript,供你参考和学习。 总之,jQuery TableDnD是一个强大且易于使用的插件,能帮助开发者轻松...

    ruby-使用ruby实现的排序算法-sorting.zip

    本资源"ruby-使用ruby实现的排序算法-sorting.zip"聚焦于如何使用Ruby实现不同的排序算法,这对于Ruby开发者来说是一项重要的技能。下面将详细讨论Ruby中的排序算法及其原理。 1. 内置排序方法 `sort` Ruby提供了...

    Python库 | sorting_with_linus-0.1.tar.gz

    资源分类:Python库 所属语言:Python 资源全名:sorting_with_linus-0.1.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    jQuery用户界面库

    - **排序功能**:介绍了Sorting小部件的排序能力。 - **配置选项**:列出了所有配置选项及其默认值。 - **排序策略**:探讨了不同的排序策略及其优缺点。 ##### 2.13 Chapter 13: UI Effects - **视觉效果**:介绍...

    10个 JQUERY 例子

    除了表格排序,jQuery还能实现列表项的拖放排序。用户可以通过拖动来重新排列列表,这种功能在待办事项列表或项目管理工具中常见。 ### 10. **拖动2例(More Dragging Examples)** 除了基础的拖动,还有更高级的...

    计算机程序设计与艺术第三卷:排序与查找Sorting and Searching(中英)

    第三卷——《排序与查找》(Sorting and Searching),更是程序员们在算法学习阶段必读的经典文献之一。 在这本书中,高德纳教授深入剖析了排序和查找这两个基本操作,它们是计算机科学中数据处理和信息管理的基础...

    排序sorting.c

    利用c语言,编写几种排序方法:冒泡、选择、插入、堆排序等。将他们集中起来,写到一个文件进行比较。在此,运用了栈、数组,循环等结构,可以自行选择排序方法进行排序,调试后比较满意。

Global site tag (gtag.js) - Google Analytics