主页 / 问题 / 764578
Accepted
Виталик Черный
Asked:2020-12-29 00:51:05 +0000 UTC2020-12-29 00:51:05 +0000 UTC

如何在布局期间对 div 元素进行排序？

  • 772

在这个示例中有一个包含演员列表的页面。假设我组成了所有元素，但序列被破坏了。如何按演员的名字对编辑器中的元素进行排序，因为手动操作是黑暗的。告诉我在这种情况下您如何制作网站？

.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

    好吧，你可以在输出时愚蠢地对脚本进行排序

    jQuery(document).ready(function($) {
  (function() {
    var users = $('div.user');
    var cmp = function(left, right) {
      if (left < right)
        return -1;
      if (left == right)
        return 0;
      return 1;
    }
    users.sort(function(left, right) {
      var res = cmp(
        $('.user__user-name', left).text(),
        $('.user__user-name', right).text()
      );
      if (res === 0) {
        res = cmp(
          parseInt($('.user__user-age', left).text()),
          parseInt($('.user__user-age', right).text())
        );
      }
      return res;
    });
    var parent = users.parent();
    users.detach().appendTo(parent).show();
  })();
});
    .user-list__user {
  background: #325;
  color: #fff;
  border: 2px solid #287;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>

<body>
  <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 class="user user-list__user">
        <span class="user__user-name">Маша</span>
        <span class="user__user-age">5</span>
      </div>
    </div>
  </main>
</body>

</html>

    或将苍蝇与肉饼分开。在来自显示器的数据意义上

    jQuery(document).ready(function($) {
  (function() {
    var users = [
      {name: "Вася", age: 45},
      {name: "Андрей", age: 18},
      {name: "Сережа", age: 12},
      {name: "Маша", age: 34},
      {name: "Маша", age: 5}
    ];
    var cmp = function(left, right) {
      if (left < right)
        return -1;
      if (left == right)
        return 0;
      return 1;
    }
    users.sort(function(left, right) {
      var res = cmp(left.name, right.name);
      if (res === 0)
        res = cmp(left.age, right.age);
      return res;
    });
    var template = $('div.user');
    var parent = template.parent();
    for (var i = 0; i < users.length; i++) {
      $('.user__user-name', template).text(users[i].name);
      $('.user__user-age', template).text(users[i].age);
      template = template.appendTo(parent).clone();
    };
  })();
});
    .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>
<!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>

<body>
  <main class="main">
    <div class="user-list">
      <div class="user user-list__user">
        <span class="user__user-name"></span>
        <span class="user__user-age"></span>
      </div>
    </div>
  </main>
</body>

</html>

    • 2

相关问题