Javascript 根据数组顺序对div进行排序，并添加标题和计数

我的html如下所示：

<div id="mainboard">
    <div id="card"><div class="price">20</div><div class="style">blue</div></div>
    <div id="card"><div class="price">23</div><div class="style">red</div></div>
    <div id="card"><div class="price">10</div><div class="style">red</div></div>
    <div id="card"><div class="price">29</div><div class="style">green</div></div>
    <div id="card"><div class="price">35</div><div class="style">blue</div></div>
</div>

我得到：

<div id="mainboard">
    <div id="card"><div class="price">20</div><div class="style">blue</div></div>
    <div id="card"><div class="price">35</div><div class="style">blue</div></div>
    <div id="card"><div class="price">29</div><div class="style">green</div></div>
    <div id="card"><div class="price">23</div><div class="style">red</div></div>
    <div id="card"><div class="price">10</div><div class="style">red</div></div>
</div>

20蓝色
35蓝色
29绿色
23红色
10红色

我如何才能使结果如下所示： （请注意自定义颜色顺序，并按类别统计行数。）

红色（2）
23红色
10红色
蓝色（2）
20蓝色
35蓝色
绿色（1）
29绿色

退房

改变

var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();

到

---

这将根据数组中的位置为您提供一个值。

这是对代码的完全修改，因此我将把它留给您来重新构建为函数

它以显示的数组顺序将颜色包装在新的div中，并按价格对每种颜色进行排序

// variable setup
var $styles = $('.style'),
    colorOrder = ['red', 'blue', 'green'],
    $main = $('#mainboard');
    // loop over colors to find matching elements
    $.each(colorOrder, function (_, color) {
        var $wrapper = $('<div>');
        var $colorStyle= $styles.filter(function () {
            return $(this).text() == color;
        });        

       $colorStyle.parent().sort(function (a, b) {
            var priceA = +$(a).find('.price').text(),
                priceB = +$(b).find('.price').text();

            return priceA > priceB ? 1 : (priceA < priceB ? 0 : -1);
        }).appendTo($wrapper);
        $wrapper.prepend('<h3>' + color + ' ('+ $colorStyle.length + ')</h3>');            

        $main.append($wrapper);
    });

//变量设置
变量$styles=$（'.style'），
颜色顺序=[‘红色’、‘蓝色’、‘绿色’]，
$main=$（“#主板”）；
//循环颜色以查找匹配的元素
$.each（颜色顺序，函数（\ux，颜色）{
变量$wrapper=$（''）；
var$colorStyle=$styles.filter（函数（）{
返回$（this）.text（）==颜色；
});        
$colorStyle.parent（）.sort（函数（a，b）{
var priceA=+$（a）.find（'.price'）.text（），
priceB=+$（b）.find（'.price'）.text（）；
返回价格A>priceB？1：（priceA

将颜色用作样式父级上的类或数据属性以及价格的数据属性会更有效一些…会切断这条链的一部分

---

将您的

id

s更改为

class

es，因为

id

s必须是唯一的

然后，您可以使用以下代码：

函数SortDivs（父、子选择器、键选择器）{
var colorOrder=['红色'、'蓝色'、'绿色']；
$.each（颜色顺序，函数（\ux，颜色）{
var ch=
find（keySelector）.filter（函数（）{
返回$（this）.text（）==颜色
}).parent（）.appendTo（父项）；
前（''+color+'（'+ch.length+'））；
});
}
SortDivs（$（'mainboard'），'div'，'div.style'）
.title{
边框：1px纯黑；
}
.价格，.款式{
显示：表格单元格；
填充：0.2米；
}

20蓝色
23红色
10红色
29绿色
35蓝色
修复了示例代码。它只是示例代码，这甚至不是问题的重点。这就是我来这里寻求帮助的原因。我真正的代码远不止这些。如果能解决上述问题，我可以推断出符合我需要的答案。是的，并为每种颜色提供行数。是否有方法添加标题div并获得行数？当然，您可以在排序时添加一些类。然后使用选择器选择该类的所有元素并在html前加上前缀。不必每次计算每个类别的所有div，就可以获得行数的好方法是什么？谢谢你的回答。我将测试一会儿。标题的行数不正确。例如，红色（2）表示有多少行是红色的。在您提供的演示中，它当前显示的是价格值。@rotaercz我根本没有添加行数…现在将添加广告…请稍等片刻。我的html中的许多值都显示为：无；我以为你们认为我想要的是价格值而不是行数。调整了行数的答案。我不知道你说的价格是什么意思……我和你举的例子相符
<div id="mainboard">
    <div id="title">Red (2)</div>
    <div id="card"><div class="price">23</div><div class="style">red</div></div>
    <div id="card"><div class="price">10</div><div class="style">red</div></div>
    <div id="title">Blue (2)</div>
    <div id="card"><div class="price">20</div><div class="style">blue</div></div>
    <div id="card"><div class="price">35</div><div class="style">blue</div></div>
    <div id="title">Green (1)</div>
    <div id="card"><div class="price">29</div><div class="style">green</div></div>
</div>

var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();

var vA = colorOrder.indexOf($(keySelector, a).text());
var vB = colorOrder.indexOf($(keySelector, b).text());

// variable setup
var $styles = $('.style'),
    colorOrder = ['red', 'blue', 'green'],
    $main = $('#mainboard');
    // loop over colors to find matching elements
    $.each(colorOrder, function (_, color) {
        var $wrapper = $('<div>');
        var $colorStyle= $styles.filter(function () {
            return $(this).text() == color;
        });        

       $colorStyle.parent().sort(function (a, b) {
            var priceA = +$(a).find('.price').text(),
                priceB = +$(b).find('.price').text();

            return priceA > priceB ? 1 : (priceA < priceB ? 0 : -1);
        }).appendTo($wrapper);
        $wrapper.prepend('<h3>' + color + ' ('+ $colorStyle.length + ')</h3>');            

        $main.append($wrapper);
    });