jQuery/Javascript - 根据子 Div 中的数字对父 Div 进行排序答案

【问题标题】：jQuery/Javascript - Sort Parent Divs Based on A number in Child DivsjQuery/Javascript - 根据子 Div 中的数字对父 Div 进行排序
【发布时间】：2015-08-19 08:20:29
【问题描述】：

假设我们有以下 html div 结构。

 <div class="article-container">

      <div class="article">
         <div class="article-child">views 9</div>
      </div>
      <div class="article">
         <div class="article-child">views 3</div>
      </div>
      <div class="article">
         <div class="article-child">views 5</div>
      </div>
      <div class="article">
         <div class="article-child">views 10</div>
      </div>
      <div class="article">
         <div class="article-child">views 1</div>
      </div>

 </div>

使用 jQuery，我如何才能按照子值中数字的升序/降序克隆/复制粘贴“文章”div。所以我得到这样的结果。

 <div class="article-container">

      <div class="article">
         <div class="article-child">views 10</div>
      </div>
      <div class="article">
         <div class="article-child">views 9</div>
      </div>
      <div class="article">
         <div class="article-child">views 5</div>
      </div>
      <div class="article">
         <div class="article-child">views 3</div>
      </div>
      <div class="article">
         <div class="article-child">views 1</div>
      </div>

 </div>

在编写代码之前，我试图为它准备算法。我知道如何在 jQuery 中编写代码和复制粘贴内容，但我不确定如何实现这一点。

【问题讨论】：

尽量使用属性而不是与内部html比较
如果是这样的话，那将非常容易，但实际上，我的情况下不存在这些属性。我遇到了这种确切的情况。
然后提取子元素的值，将父元素保存在数组中，然后您可以根据需要对它们进行排序
如何比较它们？
类似于stackoverflow.com/questions/13490391/… 这可能会有所帮助。

标签： javascript jquery html

【解决方案1】：

你可以试试这个：

var cont = $(".article-container");
var arr = $.makeArray(cont.children(".article"));

arr.sort(function(a, b) {
  var textA = +$(a).find('.article-child').text();
  var textB = +$(b).find('.article-child').text();

  if (textA < textB) return 1;
  if (textA > textB) return -1;

  return 0;
});

cont.empty();

$.each(arr, function() {
    cont.append(this);
});

参见演示here

如果你必须考虑文本，你应该使用正则表达式：

var cont = $(".article-container");
var arr = $.makeArray(cont.children(".article"));

arr.sort(function(a, b) {
  var textA = +$(a).find('.article-child').text().match(/views (\d+)/)[1];
  var textB = +$(b).find('.article-child').text().match(/views (\d+)/)[1];

  if (textA < textB) return 1;
  if (textA > textB) return -1;

  return 0;
});

cont.empty();

$.each(arr, function() {
    cont.append(this);
});

参见演示here

【讨论】：

这是一个好方法。我正在试一试。一会儿会在这里分享答案。谢谢。
请再读一遍，我已经做了一些小修正以完全匹配您的排序顺序
如果我只在子 div 上有数字，这完全适用。如果我有字符串以及子元素中的数字怎么办。我想我们将不得不使用正则表达式来从中获取数字。让我编辑问题。非常感谢您的帮助。