jQuery - 属性値に基づいて要素のグループを作成する

Question

共通のプロパティに基づいて要素のグループを作成する最善の方法を見つけようとしています。私は明らかにそれらを1つずつ比較して正しい結果に終わることができますが、より良い方法があると確信しています。

したがって、私は基本的にdiv、position top、position left、widthおよびposition bottomの4種類の属性を割り当てます。私はそれらを割り当てる4つのdivsを持っています（しかし、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のデータボトムの最大値は、データグループ= 2の場合、2579と3579です。

私はそれぞれの.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 
    }); 
}); 

あなたも属性を他のデータのチェックを実装するために同じロジックを使用することができます。