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

Answer 2

您可以使用Javascript功能存储数组的自定义键和jquery迭代它们的能力。

因为宽度是数字，所以它将创建一个最大宽度的数组，迭代将按顺序遍历它们。

var orderSizes = [];
$('#flagSize button').each(function(){
  var widthValue = $(this).html();
  widthValue = widthValue.split('x');
  var key = widthValue[0];
  var val = $(this).attr('id');
  if(orderSizes[key]) {// If it is defined, we push the id to the existinga array
    orderSizes[key].push(val);
  } else {             // Else we create the array
    orderSizes[key] = [val];
  }
});

// Now we iterate through the key/values pairs of the orderSize
$.each(orderSizes, function(width, ids) {
  if(ids != undefined) { // For widths numbers without buttons, we should not create a div.
    var div = $('<div class="buttonGroup" id="width'+width+'"/>');
    $.each(ids, function(key, id) {
      $("#"+id).appendTo($(div));     // attaches the button to its new parent.
    });
    div.appendTo($("#flagSize")); // Inserts the div to the top-level.
  }
});

您可以在此处试用：JSFiddle

如何嵌套按第一个值划分的项目数组？

Fiddle

2 个答案: