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

    2 answers 2

    A single row table is enough

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

    closest - The closest matching ancestor. Those. For each of the selected elements , closest() will search for the closest matching element from among the following: the selected element itself, its parent, its progenitor, and so on, until the beginning of the DOM tree.

    • Have you tried to apply this line on jsfiddle? I have already tried to twist it differently, anyway, either it is used only for the first block, or it does not work at all. Try it please, it does not work for me. - SilaevD
    • @SilaevD try through the loop. look again the answer) - Alexey Shimansky

    Cycle can be done

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

    • Super! I tried to do it through $ .each, it did not work .. and this is what you need. Only for the last block does not work. lenght not exactly work out? - SilaevD
    • Gospadya .. before me as a giraffe .. put less or equal, everything works. Thank! - SilaevD
    • @SilaevD, mda: D - Yuri