我正在嘗試按數字順序對 div 中的數字進行排序。但是，盡管代碼看起來不錯，但它只是無法正常作業。所以我看看有沒有人有什么想法？
在頁面上，一個頁面上有多個這種格式的 div，它們都具有相同的類名。
<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>
我正在嘗試按頁面加載時的數字順序對這些數字進行排序。所以我將它們存盤在一個陣列中并嘗試執行 .sort() 函式。但仍然沒有奏效。
$(function() {
let textArray = [];
$('.class-numbers').contents().each(function () {
textArray.push($(this).text());
});
textArray.sort(function(a, b) {
return a - b;
});
console.log(textArray);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>控制臺日志似乎使用類號控制臺記錄每個 div 的陣列。但似乎沒有按數字對它們進行排序？
任何幫助表示贊賞。
uj5u.com熱心網友回復：
根據您在評論中闡明的要求，您希望：
- 分別對每個逗號分隔的數字進行排序
div.class-numbers - 用新排序的數字覆寫每個 div 的文本內容
這非常簡單：您只需使用.text()并將一個函式傳遞給它，它將回傳排序后的數字陣列。.text()接受一個函式并將使用回傳值來設定元素的內部文本。
這是關于 jQuery 的“神奇”事情之一.text()，就像許多其他方法一樣，隱式回圈遍歷集合：您甚至不需要先使用.each()。這些方法在操作時會考慮到匹配的元素集，強調我自己的：
將匹配元素集中每個元素的內容設定為指定的文本。
這給了我們以下性質的代碼：
$('.class-numbers').text(function(_i, text) {
return text.split(',').sort(function(a, b) {
return a - b;
}).join(',');
});
但是，如果您熟悉 ES6，我們可以將所有這些壓縮到一個單行中（犧牲一些可讀性和對 的參考this，在這種情況下您無論如何都不需要）：
$('.class-numbers').text((_,t) => t.split(',').sort((a,b) => a-b).join(', '));
請參閱下面的概念驗證：
$('.class-numbers').text((_,t) => t.split(',').sort((a,b) => a-b).join(', '));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>
<div class="class-numbers">73, 16, 37, 22, 1</div>當然總有一個不需要 jQuery 的原生 JS 解決方案；）
document.querySelectorAll('.class-numbers').forEach(el => {
el.textContent = el.textContent
.split(',')
.sort((a,b) => a-b)
.join(', ');
});<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>
<div class="class-numbers">73, 16, 37, 22, 1</div>uj5u.com熱心網友回復：
您正在將單個字串推送到您的陣列中$(this).text()，而不是單個值。拆分字串textArray = $(this).text().split(',');
例子：
let textArray = [];
$('.class-numbers').each(function() {
textArray = $(this).text().split(',');
textArray.sort(function(a, b) {
return a - b;
});
console.log(textArray);
$(this).text(textArray.join(', '))
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>
<div class="class-numbers">9, 8, 7, 6, 5, 4, 3, 2, 1</div>
<div class="class-numbers">55, 11, 76, 2, 14</div>uj5u.com熱心網友回復：
嘗試將文本拆分為元素，然后再對它們進行排序。
textArray = $(this).text().split(', ')
您可能也想將它們轉換為數字。
textArray = $(this).text().split(', ').map(it => parseInt(it))
uj5u.com熱心網友回復：
不使用 jQuery：
let textArray = document.querySelectorAll(".class-numbers")[0].innerText.split(', ');
textArray.sort(function(a, b){return a - b});
console.log(textArray);<div class="class-numbers">14, 16, 18, 25, 3, 38, 41, 9</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/421354.html
標籤：