Question

我无法在HTML / CSS / JAVASCRIPT（即食蚁兽，狒狒，猫......）中按升序和降序对内容按钮列表进行排序。

最初，我想使用我的按钮ID进行排序，但我无法解决。

我在网上看了一下，发现了一些在DIV /按钮内部使用文字的代码，但代码在我的页面上没有正常工作。

以下是有效的示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

基本上，它没有使用＆＃34; idn＆＃34;对每个按钮进行排序。在每个按钮正确。我的按钮列表比这个大很多，订单都是错误的（如随机顺序）。什么似乎是问题？

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

使用ID按升序和降序排序DIV

1 个答案: