Question

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

所以，我基本上为我的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>

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

问题1：如何为公共属性值分配组？

我最终想要的是：

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

对于具有相同数据顶值的所有div，数据组将等于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的最大数据底值为2579，data-group = 2为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
  });
});

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

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

1 个答案: