javascript - 按升序和降序对具有ID的DIV进行排序

Question

我在尝试以 HTML/CSS/JAVASCRIPT(即 Anteater、Baboon、Cat...)对内容按升序和降序排序的按钮列表时遇到问题。

本来我想用我的BUTTON ID来排序，但是我无法解决。

我在网上查看并发现一些代码可以在 DIV/按钮内使用文本，但这些代码在我的页面上无法正常工作。

这是有效的示例代码:

var $divs = $("button.bingo_button_4");

$('#alphBnt').on('click', function() {
  var alphabeticallyOrderedDivs = $divs.sort(function(a, b) {
    return $(a).find("h1").text() > $(b).find("h1").text();
  });
  $("#bingo_width_x").html(alphabeticallyOrderedDivs);
});

$('#numBnt').on('click', function() {
  var numericallyOrderedDivs = $divs.sort(function(a, b) {
    return $(a).find("h1").text() < $(b).find("h1").text();
  });
  $("#bingo_width_x").html(numericallyOrderedDivs);
});

body {
  background: #eee;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="alphBnt">Ascending</button>
  <button id="numBnt">Descending</button>
    <div id="bingo_width_x">
  <button class="bingo_button_4">
  <h1>B</h1><DIV>asdf</DIV>
  </button>
    
  <button class="bingo_button_4">
    <h1>A</h1><DIV>asdf</DIV>
  </button>
    
  <button class="bingo_button_4">
    <h1>D</h1><DIV>asdf</DIV>
  </button>
    
  <button class="bingo_button_4">
    <h1>C</h1><DIV>asdf</DIV>
  </button>

  <button class="bingo_button_4">
    <h1>E</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>F</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>G</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>H</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>U</h1><DIV>asdf</DIV>
  </button>

</div>

这是我的代码:

function order_bingo_item(text_order)
{

  var order_type = text_order;
  var $divs = $("button.bingo_button_4");

if (order_type=='ascending')
 {
  var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("idn").text() > $(b).find("idn").text();
    });
    $("#bingo_width").html(alphabeticallyOrderedDivs);
 }
else
if (order_type=='descending')
 {
  var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("idn").text() < $(b).find("idn").text();
    });
    $("#bingo_width").html(alphabeticallyOrderedDivs);
 }
  

}

.bingo_button_4 idn
{
  color: black;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="alphBnt" onclick=order_bingo_item('ascending');>Ascending</button>
<button id="numBnt" onclick=order_bingo_item('descending');>Descending</button>


<div id="bingo_width" class="bingo_width" style="border:solid 2px; width:px;">
  
  <button id="ID_grid_101_3_user" class="bingo_button_4">
    <idn>3</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    bear
    </div>
</button>

<button id="ID_grid_101_0_user" class="bingo_button_4">
    <idn>0</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    ant-eater
    </div>
</button>

<button id="ID_grid_101_15_user" class="bingo_button_4">
    <idn>15</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    cobra
    </div>
</button>


</div>

基本上，它没有正确地在每个按钮中使用“idn”对每个按钮进行排序。我的按钮列表比这大得多，而且顺序全错了(就像随机顺序)。似乎是什么问题？

Answer 1

试试这个:

function order_bingo_item(text_order)
{

  var order_type = text_order;
  var $divs = $("button.bingo_button_4");

if (order_type=='ascending')
 {
  var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("idn").text() - $(b).find("idn").text();
    });
    $("#bingo_width").html(alphabeticallyOrderedDivs);
 }
else
if (order_type=='descending')
 {
  var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(b).find("idn").text() - $(a).find("idn").text();
    });
    $("#bingo_width").html(alphabeticallyOrderedDivs);
 }
  

}

.bingo_button_4 idn
{
  color: black;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="alphBnt" onclick=order_bingo_item('ascending');>Ascending</button>
<button id="numBnt" onclick=order_bingo_item('descending');>Descending</button>


<div id="bingo_width" class="bingo_width" style="border:solid 2px; width:px;">
  
  <button id="ID_grid_101_3_user" class="bingo_button_4">
    <idn>3</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    bear
    </div>
</button>

<button id="ID_grid_101_0_user" class="bingo_button_4">
    <idn>0</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    ant-eater
    </div>
</button>

<button id="ID_grid_101_15_user" class="bingo_button_4">
    <idn>15</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    cobra
    </div>
</button>


</div>

整数排序有点不同。你需要做的

a - b 而不是 a > b