Question

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

<?php
    echo '<select id = "room_change'.$booking_id[$id].'" hidden>';
    foreach($all_rooms as $val) {
           echo '<option>'.$val .'</option>';
     }
    echo '</select>';
?>

使用jQuery，我怎样才能克隆/复制粘贴＆＃34;文章＆＃34;按照子女值中的数字的升序/降序排列。所以我得到这样的结果。

 <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和复制粘贴中编写代码，但我不确定如何实现这一点。

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

参见 demo 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);
});

参见 demo here

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

1 个答案: