Несколько эквалайзеров в одном контейнере

Question

Возможно ли инициализировать несколько Equalizers в одном контейнере?

<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> 

Когда я делю data-equalizer «s инициализации на все separeted Див работает правильно.

<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

Невозможно инициализировать несколько эквалайзеров в одном контейнере. Самое быстрое решение - добавить еще один контейнер строки перед вашим .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); 
     }); 
    }); 
}