複数のイコライザを1つのコンテナにまとめる

Question

複数のEqualizersを1つのコンテナに初期化することはできますか？

<div class="row props-set" > 
    <div class="small-12 columns text-center" data-equalizer="header" data-equalizer="paragraph" data-equalizer="image" data-equalize-on="medium"> 
    <div class="props-box"> 
     <div class="image" data-equalizer-watch="image"><img src="assets/img/props1.png" alt=""></div> 
     <h3 data-equalizer-watch="header">Lorem ipsum dolor sit.</h3> 
     <p data-equalizer-watch="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, iste!</p> 
    </div> 
    <div class="props-box"> 
     <div class="image" data-equalizer-watch="image"><img src="assets/img/props2.png" alt=""></div> 
     <h3 data-equalizer-watch="header">Dolores, dolorum omnis ex.</h3> 
     <p data-equalizer-watch="paragraph">Sint natus nam blanditiis temporibus labore, tempore consectetur beatae dolores.</p> 
    </div> 
    <div class="props-box"> 
     <div class="image" data-equalizer-watch="image"><img src="assets/img/props3.png" alt=""></div> 
     <h3 data-equalizer-watch="header">Odit quasi ipsa, mollitia.</h3> 
     <p data-equalizer-watch="paragraph">Libero quis omnis, beatae unde expedita nostrum quidem non necessitatibus!</p> 
    </div> 
    </div> 
</div> 

私はseparetedのdivのすべてにdata-equalizerの初期化がちょうどいい作品分けます。

<div class="row props-set" data-equalizer="image" data-equalize-on="medium"> 
    <div class="dummy-div" data-equalizer="paragraph" data-equalize-on="medium"> 
     <div class="small-12 columns text-center" data-equalizer="header" data-equalize-on="medium"> 

Answer 1

複数のイコライザを1つのコンテナに初期化することはできません。 最速の解決策は、.row.props-setの前に別の行コンテナを追加し、これにdata-equalizer = "header"を置くことです。 （Foundation）

個人的に私は、カスタムスクリプトを使用してこの問題を解決することを好む：

HTML：

<div class="row" data-equal="ONE,TWO"> 
    <div class="medium-4"> 
     <div class="top" data-equal-watch="ONE"></div> 
     <div class="bottom" data-equal-watch="TWO"></div> 
    </div> 
    <div class="medium-4"> 
     <div class="top" data-equal-watch="ONE"></div> 
     <div class="bottom" data-equal-watch="TWO"></div> 
    </div> 
    <div class="medium-4"> 
     <div class="top" data-equal-watch="ONE"></div> 
     <div class="bottom" data-equal-watch="TWO"></div> 
    </div> 
</div> 

スクリプト：

function Equal(){ 
    $("[data-equal]").each(function(){ 
     var parent = $(this); 
     var type = parent.attr('data-equal'); 
     var array = type.split(","); 

     $.each(array,function(i,e){ 
      var H = 0; 
      parent.find("[data-equal-watch="+e+"]").each(function(){ 
       var h = $(this).height(); 
       if(h > H){ H = h; } 
      }); 
      console.log(H); 
      $("[data-equal-watch="+e+"]").height(H); 
     }); 
    }); 
}