主页 / 问题 / 761583
Accepted
Виталик Черный
Asked:2020-12-22 01:25:54 +0000 UTC2020-12-22 01:25:54 +0000 UTC

对 div 元素进行排序

  • 772

请告诉我如何.user相对于子元素中的内容按字母顺序对父元素进行排序.user__user-name。

1：在代码编辑器中排序，以免手动调换位置。

2：现场排序。

.user-list__user {
  background: #325;
  color: #fff;
  border: 2px solid #287;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<main class="main">
	<div class="user-list">
		<div class="user user-list__user">
			<span class="user__user-name">Вася</span>
			<span class="user__user-age">45<span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Андрей</span>
			<span class="user__user-age">18</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Сережа</span>
			<span class="user__user-age">12</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Маша</span>
			<span class="user__user-age">34</span>
		</div>
	</div>
</main>
<script src="js/main.min.js"></script>
</body>
</html>

javascript

1 个回答

  1. Best Answer

    $(window).load(function () {
    var c = jQuery.makeArray($("#user-list >"));
    c.sort(function (a, b) {
        a = $(a).text();
        b = $(b).text();
       return a < b ? -1 : a > b ? 1 : 0
    });
    $(c).appendTo("#user-list")
});
    .user-list__user {
  background: #325;
  color: #fff;
  border: 2px solid #287;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-list" id="user-list">
		<div class="user user-list__user">
			<span class="user__user-name">Вася</span>
			<span class="user__user-age">45<span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Андрей</span>
			<span class="user__user-age">18</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Сережа</span>
			<span class="user__user-age">12</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Маша</span>
			<span class="user__user-age">34</span>
		</div>
	</div>

    • 2

相关问题