jQuery/Javascript - 根据Child Divs中的数字排序父Div

Question

假设我们有以下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,我怎样才能以其子值中的数字的升序/降序克隆/复制粘贴"article"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和复制粘贴的东西,但我不知道如何实现这一点.

Answer 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);
});

在这里看演示

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

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);
});

在这里看演示