Hello,
There are 2 blocks, I want the .workDataHeight block to take the height of the .work-block.
I wrote the following, please tell me how to optimize (after all, the same thing is being done):
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()); } So only the first block fulfills:
$(".workDataHeight[rel ="+ workDataHeightRel +"]").height($(".work-block[rel ="+ workBlockRel +"]").height()); Here is the whole example with html, css and 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>"> texttexttexttexttexttexttexttexttex <br> ttexttexttexttexttexttexttexttexttexttexttextt <br> xttexttexttexttexttexttexttexttexttexttexttexttexttext <br> xttexttexttexttexttexttexttexttexttexttexttexttexttext </ p><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>"> texttexttexttexttexttexttexttexttex <br> ttexttexttexttexttexttexttexttexttexttexttextt <br> xttexttexttexttexttexttexttexttexttexttexttexttexttext </ p><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>
or jsfiddle