jQuery排序li,Sorting elements with jQuery

本文介绍了一个jQuery插件,该插件允许用户根据自定义比较函数对DOM元素进行排序。通过示例展示了如何使用此插件对列表项按字母顺序进行重新排序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


/**
* 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值