Jquery - 按子项的innerHTML 对DIV 进行排序

JS

使用Jquery按子项的innerHTML对DIV进行排序

在网页开发中，经常需要对元素进行排序，以便按照一定的规则展示。在这篇文章中，我们将介绍如何使用Jquery按子项的innerHTML对DIV进行排序，并提供一个简单的案例代码。

首先，我们需要引入Jquery库。你可以在HTML文件中添加以下代码，将Jquery库引入到你的项目中：

<script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>

接下来，我们需要创建一个包含多个DIV元素的父容器。每个DIV元素都包含一个子项，我们将根据这个子项的innerHTML进行排序。以下是一个简单的HTML结构示例：

<div id="parent-contAIner">
  <div class="child">Apple</div>
  <div class="child">Orange</div>
  <div class="child">Banana</div>
  <div class="child">Grape</div>
</div>

在这个示例中，父容器的id为"parent-contAIner"，每个子项的类名为"child"。

现在，我们将使用Jquery来实现按子项的innerHTML对DIV进行排序。首先，我们需要选中父容器，并获取所有子项：

var parentContAIner = $("#parent-contAIner");
var children = parentContAIner.children();

接下来，我们可以使用Jquery的sort方法对子项进行排序。我们将传入一个自定义的比较函数，该函数将比较两个子项的innerHTML，并返回比较结果：

children.sort(function(a, b) {
  var textA = $(a).text().toUpperCase();
  var textB = $(b).text().toUpperCase();
  if (textA < textB) {</p>    return -1;
  }
  if (textA > textB) {
    return 1;
  }
  return 0;
});

在这个比较函数中，我们首先将子项的innerHTML转换为大写字母，以便进行不区分大小写的比较。然后，我们使用普通的字符串比较逻辑来确定两个子项的顺序。

最后，我们可以使用Jquery的append方法重新将排序后的子项添加到父容器中，以实现排序效果：

parentContAIner.append(children);

通过以上步骤，我们就可以实现按子项的innerHTML对DIV进行排序了。

案例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Jquery Sort Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
  <script>
    $(document).ready(function() {
      var parentContAIner = $("#parent-contAIner");
      var children = parentContAIner.children();
      
      children.sort(function(a, b) {
        var textA = $(a).text().toUpperCase();
        var textB = $(b).text().toUpperCase();
        if (textA < textB) {</p>          return -1;
        }
        if (textA > textB) {
          return 1;
        }
        return 0;
      });
      
      parentContAIner.append(children);
    });
  </script>
  <style>
    .child {
      padding: 10px;
      border: 1px solid #000;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div id="parent-contAIner">
    <div class="child">Apple</div>
    <div class="child">Orange</div>
    <div class="child">Banana</div>
    <div class="child">Grape</div>
  </div>
</body>
</html>

在上面的案例代码中，我们首先引入了Jquery库，并在文档加载完成后执行排序逻辑。父容器的id为"parent-contAIner"，子项的类名为"child"。通过设置一些简单的样式，我们可以看到排序后的效果。

：

通过使用Jquery按子项的innerHTML对DIV进行排序，我们可以方便地对网页元素进行排序展示。这个方法可以应用于各种场景，例如按照字母顺序展示商品列表、按照评分高低排序评论等。希望本文能对你在网页开发中实现元素排序有所帮助！