Как оптимизировать данный код

347

25 декабря 2016, 22:00

Здравствуйте,
Есть 2 блока, хочется чтоб .workDataHeight блок брал высоту .work-block.
Написал следующее, подскажите пожалуйста как оптимизировать(ведь делается одно и тоже):

    var workDataHeightRel = $('.workDataHeight').attr('rel');
    var workBlockRel = $('.work-block').attr('rel');
    if (workBlockRel = 1) {
        $('.workDataHeight[rel="1"]').height($('.work-block[rel="1"]').height());
    }
    if(workBlockRel = 2) {
        $('.workDataHeight[rel="2"]').height($('.work-block[rel="2"]').height());
    }
    if(workBlockRel = 3) {
        $('.workDataHeight[rel="3"]').height($('.work-block[rel="3"]').height());
    }
    if(workBlockRel = 4) {
        $('.workDataHeight[rel="4"]').height($('.work-block[rel="4"]').height());
    }
    if(workBlockRel = 5) {
        $('.workDataHeight[rel="5"]').height($('.work-block[rel="5"]').height());
    }
    if(workBlockRel = 6) {
        $('.workDataHeight[rel="6"]').height($('.work-block[rel="6"]').height());
    }

Так только первый блок отрабатывает:

$(".workDataHeight[rel ="+ workDataHeightRel +"]").height($(".work-block[rel ="+ workBlockRel +"]").height());

Вот весь пример с html, css и js:

var workDataHeightRel = $('.workDataHeight').attr('rel'); 
var workBlockRel = $('.work-block').attr('rel'); 
 
if (workBlockRel = 1) { 
  $('.workDataHeight[rel="1"]').height($('.work-block[rel="1"]').height()); 
} 
if(workBlockRel = 2) { 
  $('.workDataHeight[rel="2"]').height($('.work-block[rel="2"]').height()); 
} 
if(workBlockRel = 3) { 
  $('.workDataHeight[rel="3"]').height($('.work-block[rel="3"]').height()); 
} 
if(workBlockRel = 4) { 
  $('.workDataHeight[rel="4"]').height($('.work-block[rel="4"]').height()); 
} 
if(workBlockRel = 5) { 
  $('.workDataHeight[rel="5"]').height($('.work-block[rel="5"]').height()); 
} 
if(workBlockRel = 6) { 
  $('.workDataHeight[rel="6"]').height($('.work-block[rel="6"]').height()); 
}

#work{padding:50px;background-color:#eee}#work .work-block{margin-bottom:60px}#work .work-block:last-child{margin-bottom:0px}#work .work-block .workDataHeight{padding:0px !important}#work .work-block .work-data{height:100%;color:#34495e;position:relative}#work .work-block .work-data::before{content:" ";position:absolute;top:46px;left:50%;bottom:46px;width:1px;margin-left:-1.5px;background-color:#34495e}#work .work-block .work-data p{margin:0px;font-family:"RobotoBold",sans-serif}#work .work-block .work-data .data-top{position:absolute;top:20px;width:100%}#work .work-block .work-data .data-bottom{position:absolute;bottom:20px;width:100%}#work .work-block .work-text{height:100%;padding:20px 20px}#work .work-block .work-text h4{font-family:"RobotoBold",sans-serif}#work .work-block .work-text a{color:#f15324}#work .work-block .work-text p{margin:10px 0 0 0}#work .work-block-inverse .work-text{text-align:right}#brand{height:200px !important}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="work"> 
    <div class="container-fluid"> 
      <div class="container"> 
         
        <div class="row"> 
 
          <div class="work-block clearfix" rel="1"> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="1"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://corp.megafon.ru/about/megafon/" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block work-block-inverse clearfix" rel="2"> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="" class="link-disabled" target="-blank">text</a> 
                <p class="text-muted">texttexttexttexttexttexttexttexttex<br>ttexttexttexttexttexttexttexttexttexttexttextt<br>xttexttexttexttexttexttexttexttexttexttexttexttexttext<br>xttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
              </div> 
            </div> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="2"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block clearfix" rel="3"> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="3"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://bcc.ru/" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block work-block-inverse clearfix" rel="4"> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://www.gkefesk.ru/" class="" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="4"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block clearfix" rel="5"> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="5"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://tddomovoy.ru/" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block work-block-inverse clearfix" rel="6"> 
            <div class="col-xs-9 col-md-11 "> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://www.peterlink.ru/" class="" target="-blank">text</a> 
                <p class="text-muted">texttexttexttexttexttexttexttexttex<br>ttexttexttexttexttexttexttexttexttexttexttextt<br>xttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
              </div> 
            </div> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="6"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
          </div> 
 
        </div> 
      </div> 
    </div> 
  </div>

или jsfiddle

Answer 1

Достаточно одной таблэтки строчки в цикле

$('.workDataHeight').each(function(){
    $(this).height($(this).closest('.work-block').height());
});

closest - Ближайший подходящий предок. Т.е. Для каждого из выбранных элементов, closest() будет искать ближайший подходящий элемент из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM.

Answer 2

Циклом можно сделать

for(var i = 0; i < $('.work-block').length; i++){ 
  $('.workDataHeight[rel="'+i+'"]').height($('.work-block[rel="'+i+'"]').height()); 
};

#work{padding:50px;background-color:#eee}#work .work-block{margin-bottom:60px}#work .work-block:last-child{margin-bottom:0px}#work .work-block .workDataHeight{padding:0px !important}#work .work-block .work-data{height:100%;color:#34495e;position:relative}#work .work-block .work-data::before{content:" ";position:absolute;top:46px;left:50%;bottom:46px;width:1px;margin-left:-1.5px;background-color:#34495e}#work .work-block .work-data p{margin:0px;font-family:"RobotoBold",sans-serif}#work .work-block .work-data .data-top{position:absolute;top:20px;width:100%}#work .work-block .work-data .data-bottom{position:absolute;bottom:20px;width:100%}#work .work-block .work-text{height:100%;padding:20px 20px}#work .work-block .work-text h4{font-family:"RobotoBold",sans-serif}#work .work-block .work-text a{color:#f15324}#work .work-block .work-text p{margin:10px 0 0 0}#work .work-block-inverse .work-text{text-align:right}#brand{height:200px !important}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="work"> 
    <div class="container-fluid"> 
      <div class="container"> 
         
        <div class="row"> 
 
          <div class="work-block clearfix" rel="1"> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="1"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://corp.megafon.ru/about/megafon/" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block work-block-inverse clearfix" rel="2"> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="" class="link-disabled" target="-blank">text</a> 
                <p class="text-muted">texttexttexttexttexttexttexttexttex<br>ttexttexttexttexttexttexttexttexttexttexttextt<br>xttexttexttexttexttexttexttexttexttexttexttexttexttext<br>xttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
              </div> 
            </div> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="2"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block clearfix" rel="3"> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="3"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://bcc.ru/" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block work-block-inverse clearfix" rel="4"> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://www.gkefesk.ru/" class="" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="4"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block clearfix" rel="5"> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="5"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
            <div class="col-xs-9 col-md-11"> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://tddomovoy.ru/" target="-blank">text</a> 
                <p class="text-muted">text</p> 
              </div> 
            </div> 
          </div> 
 
          <div class="work-block work-block-inverse clearfix" rel="6"> 
            <div class="col-xs-9 col-md-11 "> 
              <div class="work-text"> 
                <h4>text</h4> 
                <a href="http://www.peterlink.ru/" class="" target="-blank">text</a> 
                <p class="text-muted">texttexttexttexttexttexttexttexttex<br>ttexttexttexttexttexttexttexttexttexttexttextt<br>xttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
              </div> 
            </div> 
            <div class="col-xs-3 col-md-1 workDataHeight" rel="6"> 
              <div class="work-data text-center"> 
                <p class="data-top">text</p> 
                <p class="data-bottom">text</p> 
              </div> 
            </div> 
          </div> 
 
        </div> 
      </div> 
    </div> 
  </div>