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

#javascript #инспекция_кода

Здравствуйте,
Есть 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}






    

      

        
        


          

            

              

                
text
                
text
              
            
            

              

                
text
                text
                
text
              
            
          

          

            

              

                
text
                text
                
texttexttexttexttexttexttexttexttex
ttexttexttexttexttexttexttexttexttexttexttextt
xttexttexttexttexttexttexttexttexttexttexttexttexttext
xttexttexttexttexttexttexttexttexttexttexttexttexttext
              
            
            

              

                
text
                
text
              
            
          

          

            

              

                
text
                
text
              
            
            

              

                
text
                text
                
text
              
            
          

          

            

              

                
text
                text
                
text
              
            
            

              

                
text
                
text
              
            
          

          

            

              

                
text
                
text
              
            
            

              

                
text
                text
                
text
              
            
          

          

            

              

                
text
                text
                
texttexttexttexttexttexttexttexttex
ttexttexttexttexttexttexttexttexttexttexttextt
xttexttexttexttexttexttexttexttexttexttexttexttexttext
              
            
            

              

                
text
                
text
              
            
          

        
      
    
  




или jsfiddle
    

Ответы

Ответ 1

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

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


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


Ответ 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}






    

      

        
        


          

            

              

                
text
                
text
              
            
            

              

                
text
                text
                
text
              
            
          

          

            

              

                
text
                text
                
texttexttexttexttexttexttexttexttex
ttexttexttexttexttexttexttexttexttexttexttextt
xttexttexttexttexttexttexttexttexttexttexttexttexttext
xttexttexttexttexttexttexttexttexttexttexttexttexttext
              
            
            

              

                
text
                
text
              
            
          

          

            

              

                
text
                
text
              
            
            

              

                
text
                text
                
text
              
            
          

          

            

              

                
text
                text
                
text
              
            
            

              

                
text
                
text
              
            
          

          

            

              

                
text
                
text
              
            
            

              

                
text
                text
                
text
              
            
          

          

            

              

                
text
                text
                
texttexttexttexttexttexttexttexttex
ttexttexttexttexttexttexttexttexttexttexttextt
xttexttexttexttexttexttexttexttexttexttexttexttexttext
              
            
            

              

                
text
                
text