【发布时间】：2016-07-06 12:27:03
【问题描述】：
我在尝试以 HTML/CSS/JAVASCRIPT（即食蚁兽、狒狒、猫...）的方式对内容按升序和降序排列的按钮列表进行排序时遇到问题。
最初，我想使用我的 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”对每个按钮进行排序。我的按钮列表比这大得多，而且顺序都是错误的（就像随机顺序一样）。似乎是什么问题？
【问题讨论】：
标签： javascript jquery css sorting