在分区中对数字进行数字排序

Question

我正在尝试按数字顺序对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的数组进行控制台日志记录。但似乎没有对它们进行数字排序吗？

感谢您的帮助。

Answer 1

根据您在评论中澄清的需求，您希望：

1. 分别对每个div.class-numbers中以逗号分隔的数字执行排序
2. 用新排序的数字覆盖每个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>

当然，总是有一个本地JS解决方案，而不需要jQuery；(

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>

Answer 2

您使用$(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>

Answer 3

在对文本进行排序之前，请尝试将其拆分为元素。

textArray = $(this).text().split(', ')

你可能也想把它们转换成数字。

textArray = $(this).text().split(', ').map(it => parseInt(it))

Answer 4

不使用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>