Quiero conseguir el height de varias imágenes que están como hijos de sus respectivos contenedores, intenté obtener todos los elementos padre y luego obtener el elemento hijo con find('img'), pero no consigo hacer que imprima el height de cada imagen, intenté con un for pero me devuelve el siguiente error:
(index):19 Uncaught TypeError: cuadro[i].height is not a function at HTMLDocument. (http://localhost/portafolio/:19:43) at j (http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2:27136) at Object.fireWith [as resolveWith] (http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2:27949) at Function.ready (http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2:29783) at HTMLDocument.K (http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2:30128) at :2:479 at HTMLDocument.f.string.e.function.b.(anonymous function) (eval at exec_fn (:2:27), :52:92) at :2:479 at c (:2:324) at :2:479
Si le quito el for me devuelve solamente el height de la primera imágen, aquí el último código que probé:
$ (document).ready(function(){ var cuadro = $ ('.singleItem'); var imagen = $ (cuadro).find("img"); console.log(imagen.height()); });body{ padding: 0; margin: 0; font-family: Lato; background: url(https://image.freepik.com/iconos-gratis/perspectiva-rectangulo-en-posicion-diagonal_318-69634.jpg) repeat #FFF; color: #404040; } .singleItem{ width: 100%; height: 325px; overflow: hidden; background: url(https://image.prntscr.com/image/f5lAtzzEQpW154NswSnJ-g.png) no-repeat; background-size: 100% 100%; box-shadow: 0 0 5px rgba(0, 0, 0, .15); position: relative; } .sliderIt{ width: 100%; height: 296px; background: none; position: absolute; left: 0; bottom: 0; overflow: hidden; } .sliderIt img{ width: 100%; height: auto; margin-top: 0px; transition: all ease 6s; -moz-transition: all ease 6s; -webkit-transition: all ease 6s; -ms-transition: all ease 6s; -o-transition: all ease 6s; } .singleItem:hover .sliderIt img{ margin-top: -1614px; } @media (min-width: 320px) and (max-width: 767px){ .singleItem:hover .sliderIt img { margin-top: -702px; } }<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="col-lg-6"> <div class="singleItem"> <div class="sliderIt"> <img class="img" src="https://thumbs.dreamstime.com/b/no-thinking-allowed-symbol-7026534.jpg" alt=""/> </div> </div> </div> <div class="col-lg-6"> <div class="singleItem"> <div class="sliderIt"> <img class="img" src="https://s-media-cache-ak0.pinimg.com/736x/1b/f4/8c/1bf48c294196634ea3c762bd567f562f.jpg" alt=""/> </div> </div> </div> </body>
