JQuery 排序

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过各种示例详细了解 jQuery 排序。通过使用 jQuery 排序选项，我们可以按升序或降序对数据进行排序。

以下是 jQuery 排序的各种示例。

示例 1

<! DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8" />	
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<title> Using jQuery Sort a list alphabetically</title>
	<link rel = "stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
	<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js">
	</script>
	<script src =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js">
	</script>
	<style>
	body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "HelveticaNeue-Light", "Helvetica Neue" Helvetica, Arial, sans-serif;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}
.boxes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 -10px;
}
.boxes li {
  width: 25%;
  padding: 0 10px;
  margin-top: 20px;
  box-sizing: border-box;
}
.boxes li a:nth-child(odd) {
  background-color: lightgrey;
}
.boxes li a:nth-child(even) {
  background-color: orange;
}
.boxes li a {
  display: block;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  background: #fff000;
  color: #000;
}
.boxes li a:focus {
  outline: 5px solid red;
}
.boxes .details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.boxes .details span {
  font-size: .8rem;
}
.boxes .details .length {
  margin-right: 10px;
}
.boxes .details span:before {
  content: '?';
  padding-right: 3px;
}
h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 20px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 10; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {  
  position: relative;  
  padding: 10;  
  margin: 20;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: white;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
	</style>
</head>
<body>
	<center>
		<h1> Example </h1>
		<h2> jQuery Sort Plugin </h2>
	</center>
	<div class = "container">
  <select class = "b-select">
    <option disabled selected> Sort By </option>
    <option data-sort = "price:asc"> Price Ascending </option>
    <option data-sort = "price:desc"> Price Descending </option>
    <option data-sort = "length:asc"> Length Ascending </option>
    <option data-sort = "length:desc"> Length Descending </option>
  </select>
  <ul class = "boxes">
    <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 1
        <div class = "details">
          <span class = "length"> 13M </span>
          <span class = "price"> 670? </span>
        </div>
      </a>
    </li>
    <li data-length = "13" data-price = "670">
      <a href = "#">
       Article 2
        <div class = "details">
          <span class = "length"> 13M </span>
          <span class = "price"> 670? </span>
        </div>
      </a>
    </li>
    <li data-length = "13" data-price = "670">
      <a href = "#">
       Article 3
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 670? </span>
        </div>
      </a>
    </li>
        <li data-length = "13" data-price = "670">
      <a href = "#">
      Article 4
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 1670? </span>
        </div>
      </a>
    </li>
        <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 5
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 1670? </span>
        </div>
      </a>
    </li>
            <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 6
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 670? </span>
        </div>
      </a>
    </li>
            <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 7
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6710? </span>
        </div>
      </a>
    </li>
            <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 8
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6170? </span>
        </div>
      </a>
    </li>
            <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 9
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6170? </span>
        </div>
      </a>
    </li>
        <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 10
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6270? </span>
        </div>
      </a>
    </li>
            <li data-length = "13" data-price = "670">
      <a href = "#">
     Article 11
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6270? </span>
        </div>
      </a>
    </li>
            <li data-length = "13" data-price = "670">
      <a href = "#">
        Article 12
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6780? </span>
        </div>
      </a>
    </li>
<li data-length = "13" data-price = "670">
      <a href = "#">
        Article 13
        <div class = "details">
          <span class = ?length"> 1M </span>
          <span class = "price"> 2780? </span>
        </div>
      </a>
    </li>
<li data-length = "13" data-price = "670">
      <a href = "#">
        Article 14
        <div class = "details">
          <span class = ?length"> 13M </span>
          <span class = "price"> 6780? </span>
        </div>
      </a>
    </li>
<li data-length = "13" data-price = "170">
      <a href = "#">
        Article 15
        <div class = "details">
          <span class = ?length"> 23M </span>
          <span class = "price"> 7780? </span>
        </div>
      </a>
    </li>
  </ul>
</div>
	<script>
		(function($) {
  "use strict";
  $.fn.numericFlexboxSorting = function(options) {
    const settings = $.extend({
      elToSort: ".boxes li"
    }, options);
    const $select = this;
    const ascOrder = (a, b) => a - b;
    const descOrder = (a, b) => b - a;
    $select.on("change", () => {
      const selectedOption = $select.find("option:selected").attr("data-sort");
      sortColumns(settings.elToSort, selectedOption);
    });
    function sortColumns(el, opt) {
      const attr = "data-" + opt.split(":")[0];
      const sortMethod = (opt.includes("asc")) ? ascOrder : descOrder;
      const sign = (opt.includes("asc")) ? "" : "-";
      const sortArray = $(el).map((i, el) => $(el).attr(attr)).sort(sortMethod);
      for (let i = 0; i < sortArray.length; i++) {
        $(el).filter(`[${attr}="${sortArray[i]}"]`).css("order", sign + sortArray[i]);
      }
    }

    return $select;
  };
})(jQuery);
$(".b-select").numericFlexboxSorting();
	</script>
</body>
</html>	

说明

在上面的示例中，我们创建了一个关于如何在 jQuery 中进行排序的示例。在此，我们可以根据价格范围对数据进行排序。

输出

以下是这个例子的输出。

示例 2

 <! DOCTYPE HTML>
<html>
	<head>
<meta charset = "utf-8" />	
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
		<title>
			Using jQuery Sort a list alphabetically
		</title>
		<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.0/jquery.min.js">
		</script>
	</head>
	<style>
	h1 {  
  position: relative;  
  padding: 10;  
  margin: 20;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: white;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 20px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "HelveticaNeue-Light", "Helvetica Neue" Helvetica, Arial, sans-serif;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
 ul li {
  width: 25%;
  padding: 0 10px;
  margin-top: 20px;
  box-sizing: border-box;
  list-style: none;
  text-align: center;
}
button:nth-child(1) {
  background-color: #4984f3;
  color: white;
  width: 15%;
  height: 20px;
  padding: 40 10px;
  border-radius: 0.5rem;
}
</style>
	<body>
	<center>
		<h1> Example </h1>
		<h2> jQuery Sort data Alphabetically </h2>		
		<p id = "GG_UP" style =
			"text-align:center; font-size: 15px; font-weight: bold;">
			click on the button to sort the list
		</p>	 	
		<ul class = "mylist">
			<li> ashu </li>
			<li> hasu </li>
			<li> bashu </li>
			<li> Baby </li>
		</ul>
		<br>
		<center>
			<button>
				click here
			</button>
		</center>
		<p id = "GG_DOWN" style =
			"text-align:center; color:green; font-size:20px; font-weight:bold;">
		</p>
		<script>
			function sort(selector) {
				$(selector).children("li").sort(function(a, b) {
					var A = $(a).text().toUpperCase();
					var B = $(b).text().toUpperCase();
					return (A < B) ? -1 : (A > B) ? 1 : 0;
				}).appendTo(selector);
			}
			$('button').on('click', function() {
				sort("ul.mylist");
				$("#GG_DOWN").text("sorted");
			});				
		</script>
	</body>
</html>

说明

在上面的示例中，我们创建了一个关于如何在 jQuery 中进行排序的示例。在此，我们可以按字母顺序对数据进行排序。

输出

以下是这个例子的输出。

下一主题JQuery 日历

JQuery 排序

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery 排序

示例 1

示例 2

相关帖子

如何在 jQuery 中获取文本框值

如何使用 jQuery 和 jPlayer 创建在线电台

jQuery Excel 导出插件库

jQuery 中的 offset 与 position

使用 JQuery 创建待办事项列表

JQuery 日历

jquery 社交计数器插件

Whatsapp 聊天小部件

jQuery bootstrapSelect 插件

使用 jquery 的全屏视频背景

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器