1

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>

1
  • ¿Donde está el for?
    – Dev. Joel
    el 21 ene. 2018 a las 7:16

1 respuesta 1

1

Al hacer referencia en un ciclo como un for o each (como mi ejemplo) deberá seleccionar el elemento con JQuery de forma tradicional $(elemento) para luego recién poder acceder a height() ,

¿Por qué es necesario esto ?

En el ejemplo que muestra selecciona el heigth del elemento qué ya es una instancia de jQuery y en un for no lo es. Al iterar se convierte en un elemento del DOM simplemente.

Resultado final

$(function() {
    //Each
    var imagenes = $('.singleItem').find("img").each(function(){
        console.log($(this).height());
    });
    // For Tradicional
    var imagenes = $('.singleItem').find("img");
    for (var i = 0; i < imagenes.length; i++) {
        console.log($(imagenes[i]).height());
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

2
  • Gracias!, no estaba colocando tipo $(element), sino directo el nombre que le puse a la variable. el 21 ene. 2018 a las 7:45
  • @AndySamuelAlvarado si , recuerde que para acceder a funciones de Jquery debe tener antes una instancia de este. si no, no funcionará. Saludos.
    – Dev. Joel
    el 21 ene. 2018 a las 7:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.