javascript - 如何嵌套一组项目，将它们除以第一个值？

Question

我有一个充满按钮的 div。这些按钮的值代表产品的宽度和高度。我正在尝试拆分按钮，按宽度对它们进行排序，这是 html 中的第一个值。

所以这样:

<div id="flagSize">
    <button id="0">100x200cm</button>
    <button id="1">100x250cm</button>
    <button id="2">100x300cm</button>
    <button id="3">100x350cm</button>
    <button id="4">100x400cm</button>
    <button id="5">110x300cm</button>
    <button id="6">120x300cm</button>
    <button id="7">120x350cm</button>
    <button id="8">120x400cm</button>
    <button id="9">140x400cm</button>
    <button id="10">150x400cm</button>
</div>

必须变成这样:

<div id="flagSize">
    <div class="buttonGroup">
        <button id="0">100x200cm</button>
        <button id="1">100x250cm</button>
        <button id="2">100x300cm</button>
        <button id="3">100x350cm</button>
        <button id="4">100x400cm</button>
    </div>
    <div class="buttonGroup">
        <button id="5">110x300cm</button>
    </div>
    <div class="buttonGroup">
        <button id="6">120x300cm</button>
        <button id="7">120x350cm</button>
        <button id="8">120x400cm</button>
    </div>
    <div class="buttonGroup">
        <button id="9">140x400cm</button>
    </div>
    <div class="buttonGroup">
        <button id="10">150x400cm</button>
    </div>
</div>

要做到这一点，我想我首先必须获取按钮的内容，将其拆分为 X。然后我将这个值放入一个数组中并结合元素的 ID。

var orderSizes = [];

$('#flagSize button').each(function(){
    var widthValue = $(this).html();
    widthValue = widthValue.split('x');
    var orderItem = [widthValue[0],$(this).attr('id')]
    orderSizes.push(orderItem);
});

console.log(orderSizes);

我现在必须检查此数组的值，如果它们与数组中的其他项相同，则将它们放在类 buttonGroup 的 div 中。这是我卡住的部分。

任何对此的帮助，或不同的，更好的方法将不胜感激。

Fiddle

Answer 1

尝试类似的东西

//a cache holder to hold the wrappers to that it can be reused
var wrappers = {};

$('#flagSize button').each(function () {
    var widthValue = $.trim($(this).html());
    widthValue = widthValue.split('x')[0];
    var wrapper = wrappers[widthValue];
    //if the wrapper does not exists create one and add it after the current element
    if (!wrapper) {
        wrappers[widthValue] = wrapper = $('<div class="buttonGroup"></div>').insertAfter(this);
    }
    //move the element to the respective wrapper
    wrapper.append(this)
});

演示:Fiddle