I have a document:

<div class = "room"> <div class = "network"> <div class = "head button">Сеть</div> <div class = "tail button my_btn">+</div> </div> </div>

When I click on a div with the class my_btn, I need to get the dimensions of the parent element div with the class network.

JQuery code

 $(".network").children(".my_btn").click( ListExpand ); function ListExpand( event ) { var target = $(event.target) var X = Math.floor(target.closest(".network").css("height")); var Y = Math.floor(target.closest(".network").css("width")); }

I check the values ​​from the console, and there NaN and NaN, respectively. Tell me where the error is or offer your own version.

CSS:

 .network{ height: auto; width: auto; } .room{ background-color: #985f0d; overflow: hidden; width: auto; margin: 0; height: 300px; border-radius: 30px; border-style: solid; border-color: black; border-width: 3px; padding: 5px; } .head{ height: 40px; width: 100px; border-style: solid; border-width: inherit; float:left; } .tail{ height: 40px; width: 10px; border-bottom-right-radius: 40px; border-top-right-radius: 40px; border-style: solid; border-width: inherit; float: left; } .button { color: #fff; /* цвет текста */ text-decoration: none; /* убирать подчёркивание у ссылок */ user-select: none; /* убирать выделение текста */ background: rgb(212,75,56); /* фон кнопки */ padding: .7em 1.5em; /* отступ от текста */ outline: none; /* убирать контур в Mozilla */ } .button:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */ .button:active { background: rgb(152,15,0); } /* при нажатии */ .prokrutka { position: absolute; display:none; float: left; width: auto; height:150px; /* высота нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow-x: scroll; /* прокрутка по горизонтали */ overflow-y: scroll; /* прокрутка по вертикали */ }
  • one
    target.closest(".network").height() - Igor

2 answers 2

In your style, the child elements are specified with a float , and it makes the elements "invisible" for the parent, so the height was 0, and if you do not specify the width of the display:block , it will be equal to the width of the window or parent element. It is necessary for .network also specify a float, or make a fixed height

 function ListExpand( event ) { var target = $(event.target) var X = Math.floor(target.closest(".network").height()); var Y = Math.floor(target.closest(".network").width()); console.log(X); console.log(Y); }; $(function() { $(".network").children(".my_btn").click( ListExpand ); }); 
 .network{ width: auto; height: auto; float: left; } .room{ background-color: #985f0d; overflow: hidden; width: auto; margin: 0; height: 300px; border-radius: 30px; border-style: solid; border-color: black; border-width: 3px; padding: 5px; } .head{ height: 40px; width: 100px; border-style: solid; border-width: inherit; float:left; } .tail{ height: 40px; width: 10px; border-bottom-right-radius: 40px; border-top-right-radius: 40px; border-style: solid; border-width: inherit; float: left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "network"> <div class = "head button">Сеть</div> <div class = "tail button my_btn">+</div> </div>

  • I tried, the result was ambiguous: X = 0 and Y = 1567. It is very strange, because “by sight” the parent element matters ~ 100x50 - Evgeny Vasilyev
  • @ Yevgeny Vasiliev, is it? - Yuri
  • No, the result is the same. - Evgeny Vasilyev
  • @YevgeniyVasilyev, and load the CSS of these elements into the question. Something weird you have there or throw a link to jsfiddle) - Yuri
  • @YevgenyVasilyev, you had a problem with styles, well, in jquery too - Yuri

Try the elements directly through this and parent:

  <div class = "room"> <div class = "network"> <div class = "head button">Сеть</div> <div class = "tail button my_btn" style="cursor: pointer;">+</div> </div> </div> <script> $(".my_btn").click(function ListExpand(){ var x = Math.floor($(this).parent().height()); var y = Math.floor($(this).parent().width()); console.log(x + "; " + y); }) </script>