jQuery - 根据属性值创建元素组

Question

我正在尝试找出基于公共(public)属性创建元素组的最佳方法。显然我可以将它们一一比较并最终得到正确的结果，但我确信还有更好的方法。

所以，我基本上为我的 div 分配了 4 种类型的属性:顶部位置、左侧位置、宽度和底部位置。我有 4 个 div，我将它们分配给它们(但 4 将来可能会更大)。

zones = 4;
for (x = 1; x<=zones ; x++)
    {
        $('#zone'+x).attr('data-top',Math.floor($('#zone'+x).position().top));
        $('#zone'+x).attr('data-bottom',Math.floor($('#zone'+x).position().top) + $('#zone'+x).height());
        $('#zone'+x).attr('data-left',Math.floor($('#zone'+x).position().left));
        $('#zone'+x).attr('data-width',$('#zone'+x).width());
    }   

这样我最终会得到这样的结果:

<div id="zone2" data-top="976" data-bottom="2579" data-left="131" data-width="660">...</div>

现在我面临的挑战是根据具有共同 data-top 值的所有 div 创建元素组。简单的解决方案就是将所有 data-top 相互比较，虽然只有 4 个 div 来比较还可以管理，但如果 div 数量增加，很快就会变得一团糟。

问题1:如何为公共(public)属性值分配组？

我最终想要得到的是:

<div id="zone2" data-top="976" data-bottom="2579" data-left="131" data-width="660" data-group="1">...</div>

对于具有相同 data-top 值的所有 div，data-group 将等于 1。如果有多个组共享共同的数据顶部值，那么我需要增加数据组。我最终可能会得到这样的结果:

<div id="zone1" data-top="976" data-bottom="2379" data-left="131" data-width="660" data-group="1">...</div>
<div id="zone2" data-top="976" data-bottom="2579" data-left="131" data-width="660" data-group="1">...</div>
<div id="zone3" data-top="1500" data-bottom="2479" data-left="131" data-width="660" data-group="2">...</div>
<div id="zone3" data-top="1500" data-bottom="3579" data-left="131" data-width="660" data-group="2">...</div>

问题2:如何找到组内的最大值？

正确设置组后，我应该如何继续找到最大数据底部值？在上面的示例中，data-group=1 的最大 data-bottom 值为 2579，data-group=2 的最大 data-bottom 值为 3579

我想过使用 .each 并在 .each 中比较值，它最终有效，但代码非常长。

Answer 1

我建议采用这种方法( FIDDLE )

首先，为每个元素设置一个数据属性(data-zone)。然后迭代元素并调用 getTopGroup() 函数来检查该组是否存在并分配 data-group-top 属性。

HTML

<div class="zone1" data-zone="1">Zone 1</div>
<div class="zone2" data-zone="2">Zone 2</div>
<div class="zone3" data-zone="3">Zone 3</div>
<div class="zone4" data-zone="4">Zone 4</div>
<div class="zone1" data-zone="1">Zone 1</div>
<div class="zone2" data-zone="2">Zone 2</div>
<div class="zone3" data-zone="3">Zone 3</div>
<div class="zone4" data-zone="4">Zone 4</div>

jQuery

// Create a blank array of groups
var groupsTop = [];

var getTopGroup = function(top) {
  var group = 1;
  var groupIndex = $.inArray(parseInt(top), groupsTop);      
  if (groupIndex == -1) {
    groupsTop.push(top);
    return groupsTop.length;
  } else {
    return groupIndex + 1;
  }
};

$('[class^=zone]').each(function() {
    var elem = $(this);
  var x = elem.attr('data-zone');
  var top = 10* x;
  var topGroup = getTopGroup(top);
  // This is an example calculation of offsets
  elem.attr({
    'data-top': top,
    'data-bottom': 5 * x,
    'data-left': 3 * x,
    'data-width': 6 * x,
    'data-group-top': topGroup
  });
});

您也可以使用相同的逻辑来实现对其他数据属性的检查。