我正在尝试根据子跨度中的数字对div进行排序。
现在，我尝试根据SPAN中带有“点”类的值对具有“团队”类的DIV进行排序。
但是，当我触发排序时，什么也没有发生。
//避免多余的文本到文本代码系统// lorem ipsum胡萝卜，生态番茄汤。直到足球，而且化妆很多。Vestibulum nibh裙子胡萝卜资产。洛雷姆的整个足球比赛。但这并没有使你感到厌烦，压力和压力。即使在这里星期一辣椒。对于排球保留说下巴，但现在扣除额很大。Semper在每个地区的拍卖中都非常需要谨慎对待。米饭色拉，可作为化妆品，但可作为冰箱的成员。
jQuery.fn.orderBy = function(keySelector)
{
return this.sort(function(a,b)
{
a = keySelector.apply(a);
b = keySelector.apply(b);
if (a > b)
return 1;
if (a < b)
return -1;
return 0;
});
};
var collection = $(".team");
$("#sort").on('click', function(event){
collection.each(function() {
$(this).orderBy(function() {return +$(this).next('.points').text();}).appendTo($(this).closest('.group_table'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="group_table">
<div>
<h1>FOO</h1>
</div>
<div>
<span style="border-bottom:1px solid #000;">points</span>
</div>
<div class="team">
<span>Cucumber</span>
<span class="points" id="p1r1">6</span>
</div>
<div class="team">
<span>Bacon</span>
<span class="points" id="p2r1">3</span>
</div>
<div class="team">
<span>Chicken</span>
<span class="points" id="p3r1">0</span>
</div>
<div class="team">
<span>Porridge</span>
<span class="points" id="p4r1">9</span>
</div>
</div>
<div class="group_table">
<div>
<h1>BAR</h1>
</div>
<div>
<span style="border-bottom:1px solid #000;">points</span>
</div>
<div class="team">
<span>Cucumber</span>
<span class="points" id="p1r2">3</span>
</div>
<div class="team">
<span>Bacon</span>
<span class="points" id="p2r2">0</span>
</div>
<div class="team">
<span>Chicken</span>
<span class="points" id="p3r2">9</span>
</div>
<div class="team">
<span>Porridge</span>
<span class="points" id="p4r2">6</span>
</div>
</div>
</div>
<button style="margin-top: 2em;" id="sort">SORT ALL</button>不要为此使用jQuery。如今，该平台已经足够强大。
简短的介绍：
.group_tables并调用sortByPoints()函数.teams并将nodeList变成一个Array。parseInt() 点的内容，并按其对数组进行排序。.group_table最后一步是这样的，因为当您添加一个已经在dom中的项目时，它会从其原始位置中删除...
sort.addEventListener("click", evt => {
document.querySelectorAll(".group_table").forEach(item => {
sortByPoints(item)
})
})
function sortByPoints(element) {
Array.from(element.querySelectorAll(".team")).sort((a, b) => {
return parseInt(a.querySelector(".points").textContent) - parseInt(b.querySelector(".points").textContent)
}).forEach(item => {
element.appendChild(item)
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="group_table">
<div>
<h1>FOO</h1>
</div>
<div>
<span style="border-bottom:1px solid #000;">points</span>
</div>
<div class="team">
<span>Cucumber</span>
<span class="points" id="p1r1">6</span>
</div>
<div class="team">
<span>Bacon</span>
<span class="points" id="p2r1">3</span>
</div>
<div class="team">
<span>Chicken</span>
<span class="points" id="p3r1">0</span>
</div>
<div class="team">
<span>Porridge</span>
<span class="points" id="p4r1">9</span>
</div>
</div>
<div class="group_table">
<div>
<h1>BAR</h1>
</div>
<div>
<span style="border-bottom:1px solid #000;">points</span>
</div>
<div class="team">
<span>Cucumber</span>
<span class="points" id="p1r2">3</span>
</div>
<div class="team">
<span>Bacon</span>
<span class="points" id="p2r2">0</span>
</div>
<div class="team">
<span>Chicken</span>
<span class="points" id="p3r2">9</span>
</div>
<div class="team">
<span>Porridge</span>
<span class="points" id="p4r2">6</span>
</div>
</div>
</div>
<button style="margin-top: 2em;" id="sort">SORT ALL</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句