如何嵌套一个项目数组，将它们除以它们的第一个值

How do I nest an array of items dividing them by their first value?

本文关键字：第一个 项目数 嵌套 何嵌套 项目 一个 数组      更新时间：2023-09-26

我有一个充满按钮的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中。这是我卡住的部分。

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

小提琴

试试

//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)
});

演示:小提琴

您可以使用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

相关文章：