Get height of an image in an array

Question

Get height of an image in an array

Navigation

#1 by (1 votes)

1

I want to get the height of several images that are as children of their respective containers, I tried to get all the parent elements and then get the child element with find('img') , but I can not get it to print the height of each image, I tried with for but it returns the following error:

(index): 19 Uncaught TypeError: table [i] .height is not a function at HTMLDocument. ( link ) at j ( link ) at Object.fireWith [as resolveWith] ( link ) at Function.ready ( link ) at HTMLDocument.K ( link ) 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

If I remove the for it returns only the height of the first image, here the last code I tried:

$(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>

jquery

asked by Andy Samuel 21.01.2018 в 07:07

source

1 answer

Is it possible from a console application in dev c ++ to create an excel file and enter data? Different results when using different ways to traverse an array in JavaScript

score 1 · Accepted Answer

When referring to a cycle as a for or each (like my example) , you must select the element with JQuery in a traditional way $(elemento) and then you can just access height() ,

Why is this necessary?

In the example that shows select the heigth of the element which is already an instance of jQuery and in for it is not. When iterating it becomes an element of DOM simply.

Final result

$(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>