Good day, I do a list, I need to get the height of the next attachment to rationalize the parent block of the list, this is how the structure looks like (there are many i_n_block blocks, all absolutes, displayed by z-index)

<div class="wapper_important_news clearfix"> <div class="i_n_static fs36 regular">ВАЖНО!</div> <div data-rel="n" class="i_n_block clearfix"> <div class="left"> <div class="i_n_date fs13 light">DATE</div> </div> <div class="right"> <div class="table-cell"> <a href="#href" class="underline"> <div class="i_n_title fs16 bold">TEXT_HREF</div> </a> <div class="i_n_desc fs16 light">TEXT</div> </div> </div> </div> <div class="in-control"> <div class="left"></div> <div class="right"></div> </div> </div>

and here is what js looks like trying to resize:

 var a = $(".i_n_block:visible"); $(".wapper_important_news").height(a.next().find(".right").height());

but when executing height () it produces 100px, on every block (there is no such height anywhere at all). if you take the size of the current block (without next / prev), then everything works fine, but I need to change the height during the animation. How best to solve this problem and why, in fact, can not get the height of neighboring elements?

  • I do not understand what block you want to align? a.next () in your case is in-control .. - C.Raf.T
  • relatively .right, in it is a text that affects height. In my case, this is still the next necessary block, because a.next (). hasClass ("i_n_block") returned true to me. clarification from the question: "there are many blocks of i_n_block", this is just one example - Maximmka
  • ?? jsfiddle.net/x7Lbdjxw - C.Raf.T
  • need to warn ...)) - C.Raf.T
  • one
    yes no, it works like ... jsfiddle.net/x7Lbdjxw/1 - C.Raf.T

1 answer 1

The only option, IMHO, first give the display unit and then count the height ...

 $("#res").text($(".wapper_important_news").height()); $("button").click(function() { var a = $(".i_n_block:visible"); a.css('display', 'none'); a.next().css('display', 'block'); $(".wapper_important_news").height(a.next().find(".right").height()); $("#res").text(a.next().find(".right").height()) }) 
 .right { width: 50px; word-wrap: break-word } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <b>ресультат height: </b><span id="res"></span> <button>Click me</button> <div class="wapper_important_news clearfix" style="border: 5px solid red"> <div class="i_n_static fs36 regular">ВАЖНО!</div> <div data-rel="n" class="i_n_block clearfix"> <div class="left"> <div class="i_n_date fs13 light">DATE</div> </div> <div class="right"> <div class="table-cell"> <a href="#href" class="underline"> <div class="i_n_title fs16 bold">11111</div> </a> <div class="i_n_desc fs16 light">1111</div> </div> </div> </div> <div data-rel="n" class="i_n_block clearfix" style="display:none;"> <div class="left"> <div class="i_n_date fs13 light">DATE</div> </div> <div class="right"> <div class="table-cell"> <a href="#href" class="underline"> <div class="i_n_title fs16 bold">22222222222222222222222222222222222222222 22222222222</div> </a> <div class="i_n_desc fs16 light">22222222222222 222222222222 22222222</div> </div> </div> </div> <div class="in-control"> <div class="left">ww</div> <div class="right">ee</div> </div> </div>

  • thanks, made in the image, only in this style: elem.next().show(); var le = elem.next().find(".right").height(); elem.next().hide(); elem.next().show(); var le = elem.next().find(".right").height(); elem.next().hide(); although it was possible to take overflow - Maximmka
  • as an option ... good luck ..)) - C.Raf.T