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>
for
?