Question

我想根据数字对javascript数组进行排序，但我想要一个特定的组（例如推荐）先来升序，然后是其他没有类型的组。

下面是div，我想按照这样的方式排序：推荐首先按升序排列，然后按升序排列其他div。

下面的代码正确地按升序排序没有数据类型的div，但推荐没有按预期按升序排序。

class ShowDataClass extends DbClass{
    public function getInsertDate($id){
        $query = "SELECT * FROM metadata WHERE id = $id";
        $this->rs = $this->loadObjectList($query);
        if($this->rs[0]->prev_metadata == 0){
            $date = $this->rs[0]->date.' '.$this->rs[0]->time;
        }else{
            return $this->getInsertDate($this->rs[0]->prev_metadata);
        }
        return strval($date);
    }
}

上面的代码以“;

”的形式对div进行排序

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);
console.log(sortedDivs); 

function sorter(a, b) {
    if(a.getAttribute('data-type') == 'Recommended'){
        if (parseFloat(a.getAttribute('data-amount')) < parseFloat(b.getAttribute('data-amount'))){
          return -1;
        }
        return 0;
    }
    else{
      if (parseFloat(a.getAttribute('data-amount')) > parseFloat(b.getAttribute('data-amount'))){
        return 1;
      }
      return 0;
    }
  }

因为，可以看出没有任何数据类型的div正确排序，但推荐 div未按预期按升序排序。

注意：它确实出现在IF子句中，条件确实符合<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular"> <div class="terminalpopular" data-amount="65.95" data-type="Recommended"> </div> <div class="terminalpopular" data-amount="94.95" data-type="Recommended"> </div> <div class="terminalpopular" data-amount="70" data-type="Recommended"> </div> <div class="terminalpopular" data-amount="54.95" data-type=""> </div> <div class="terminalpopular" data-amount="67.99" data-type=""> </div> <div class="terminalpopular" data-amount="75" data-type=""> </div> <div class="terminalpopular" data-amount="78" data-type=""> </div> <div class="terminalpopular" data-amount="84.99" data-type=""> </div> <div class="terminalpopular" data-amount="84.99" data-type=""> </div> </div>。我把控制台放在IF中，它确实比较了值。

请帮忙。感谢

Answer 1

由于JS中的类型强制，你可以使用布尔值（比如在比较中）作为数字。和弦乐一样。由于-是一个数字运算，因此字符串也将被转换为数字。

因此，您可以将其视为两个＆＃34;属性＆＃34;。

上的简单数字排序

＆＃13;

function sorter(a, b) {
    return (b.dataset.type === 'Recommended') - (a.dataset.type === 'Recommended') 
        || a.dataset.amount - b.dataset.amount;
}

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);

console.log(sortedDivs)

＆＃13;

.as-console-wrapper{top:0;max-height:100%!important}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
  <div class="terminalpopular" data-amount="65.95" data-type="Recommended">
  </div>
  </div>
  <div class="terminalpopular" data-amount="54.95">
  </div>
  <div class="terminalpopular" data-amount="70" data-type="Recommended">
  <div class="terminalpopular" data-amount="84.99">
  </div>
  <div class="terminalpopular" data-amount="94.95" data-type="Recommended"> </div>
  <div class="terminalpopular" data-amount="75">
  </div>
  <div class="terminalpopular" data-amount="67.99">
  </div>
  <div class="terminalpopular" data-amount="78">
  </div>
  <div class="terminalpopular" data-amount="84.99">
  </div>
</div>

＆＃13;

Answer 2

如果某个类型的元素要在其他元素之间进行排序，那么您应该将它们分离在一个数组中并对它们进行排序，然后将它们与其余的已排序元素合并。

试试这个：

 var sortedDivs1 = $(".terminalpopular").toArray().filter(function(){
               return $(this).attr('data-type') == 'Recommended'
            }).sort(sorter);
 var sortedDivs2 = $(".terminalpopular").toArray().filter(function(){
               return $(this).attr('data-type') != 'Recommended'
            }).sort(sorter);
var sortedDivs = $.merge(sortedDivs1, sortedDivs2);
console.log(sortedDivs); 

function sorter(a, b) {

        return parseFloat(a.getAttribute('data-amount')) - 
               parseFloat(b.getAttribute('data-amount'));
 }

Answer 3

只有当两者相等时才需要返回0。

在比较金额属性的两个地方使用此项：

return parseFloat(a.getAttribute('data-amount')) - parseFloat(b.getAttribute('data-amount'))

Answer 4

我不知道它是否只能用一种方式完成，但有两种，这对我有用......

var myList = $(".terminalpopular");

myList.sort(function(a, b){
    return $(a).data("amount")-$(b).data("amount");
}).sort(function(a, b){
    if ($(a).data("type") == "Recommended" && !$(b).data("type"))
        return -1;
    else if (!$(a).data("type") && $(b).data("type") == "Recommended")
        return 1;
    else
        return 0;
});

$("#list_view_listingpopular").html(myList);

这里有一个小提琴...... https://fiddle.jshell.net/rigobauer/c47Lfq8c/

我希望它有所帮助。

Answer 5

您可以使用简单的逻辑：

创建4个标志，建议元素使用2个，金额值
由于推荐的优先级高于金额，因此应首先使用。
如果两者都推荐，请检查金额

＆＃13;

function sortList() {
  var list = $('.terminalpopular');
  var clone = list.clone();
  var recommended = 'Recommended'
  clone.sort(function(a, b) {
    var isARecommended = $(a).data('type') === recommended ? -10 : 0;
    var isBRecommended = $(b).data('type') === recommended ? -10 : 0;

    var amountA = Number($(a).data('amount'));
    var amountB = Number($(b).data('amount'));

    return isARecommended - isBRecommended || amountA - amountB;
  });
  list.parent().empty().append(clone)
}

// This is only for display purpose
function displayValue() {
  $('.terminalpopular').each(function(i, el) {
    $(el).text($(el).data('amount'));
    if ($(el).data('type')) {
      $(el).addClass('highlight')
    }
  })
}

displayValue();
sortList();

＆＃13;

.terminalpopular {
  height: 30px;
  border: 1px solid gray;
}

.highlight {
  background: #ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
  <div class="terminalpopular" data-amount="65.95" data-type="Recommended">
  </div>
  <div class="terminalpopular" data-amount="94.95" data-type="Recommended"> </div>
  <div class="terminalpopular" data-amount="70" data-type="Recommended">
  </div>
  <div class="terminalpopular" data-amount="54.95" data-type="">
  </div>
  <div class="terminalpopular" data-amount="67.99" data-type="">
  </div>
  <div class="terminalpopular" data-amount="75" data-type="">
  </div>
  <div class="terminalpopular" data-amount="78" data-type="">
  </div>
  <div class="terminalpopular" data-amount="84.99" data-type="">
  </div>
  <div class="terminalpopular" data-amount="84.99" data-type="">
  </div>
</div>

＆＃13;

使用javascript sort函数根据条件排序数组

5 个答案: