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 - 根據屬性值創建元素組

回答

相關問題