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

我试图找出最好的方法来创建基于公共属性的元素组。我可以明确地将它们逐一比较，最终得出正确的结果，但我相信还有更好的方法可以去。jQuery - 根据属性值创建元素组

所以，我基本上分配了4种类型的属性到我的div：position top，position left，width and position bottom。我有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>

和数据组将等于1为具有相同的数据顶值的所有div。如果有多个组共享公用数据最高值，那么我需要增加数据组。我最终可能会遇到这样的问题：

<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，数据组= 2的最大数据值为3579 0

我想到.each和.each比较值中的值，它在最后工作但代码非常长。

来源

2016-05-16 Laurent

在标记中div是否具有相同的'data-top'值总是连续的？ – Jamiec

Hello Jamiec，是的，常见的数据顶端意味着它们确实是连续的。 – Laurent

我建议这种方法（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 
    }); 
});

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

来源

2016-05-16 14:38:49 kapantzak

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

回答

相关问题