jQuery是一個廣受歡迎的JavaScript庫,可以為Web開發人員提供工具和方法,以簡化JavaScript和HTML的編寫和操作。其中之一就是jquery div排序。
Div排序是基于div元素的位置排序,通過jQuery可以很容易地重組頁面上的div元素,而無需進行昂貴的DOM操作。比如你可以將div元素根據它們在頁面上的位置垂直排序。
$('.wrapper').children().sort(function(a, b) { return $(a).position().top - $(b).position().top }).appendTo('.wrapper');
代碼解析:
通過選擇器選取包含到一組元素的父元素,這里我們選取的是class為wrapper的div元素。然后用children()選擇器選取所有的子元素即需要排序的div元素。
接下來的sort()方法用來排序封裝的子元素。其中a和b代表的是兩個排序對象。這個函數比較函數比較的是a和b的上邊緣距離。
排序后的元素再用appendTo()方法附加到原始元素上,即class為wrapper的div元素。
最終的效果:頁面上的div元素按照它們的位置被重新排序。這個方法是非常強大的,可以被高度定制依據你的需求。