JavaScript只迭代前四个元素

JavaScript iterates through only the first four elements

本文关键字：四个 元素 迭代 JavaScript      更新时间：2023-09-26
//@*Displaying list of images and names-----------------------*@
@foreach (var item in Model) {
    <div class="avatar-container">
        <div class="img-thumbnail">
            <img class="avatar img-thumbnail" src="@Href("~/Content/Avatars/",item.Name+".jpg")" />
        </div>  
        @Html.DisplayFor(modelItem => item.Name)  
    </div>
}   
//@*JavaScript------------------------------------------------*@  
<script>
    for (var i = 0; i < $(".avatar").length - 1; i++) {
        if ($(".avatar")[i].naturalWidth > $(".avatar")[i].naturalHeight) {
            $(".avatar").eq(i).addClass("landscape");
        }
    }
</script>
//@*CSS-------------------------------------------------------*@
div.avatar-container {
    display: inline-block;
    position: relative;
    width: 70px;
    height:70px;
    overflow: hidden;
}
div.img-thumbnail{
    width:100% !important;
    height:100%;
    background-color:#e1dada;
}
.img-thumbnail{
    padding:1px !important;
}
.avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.landscape{
    width:100%;
    height:auto;
}

结果如下:我想要显示不同大小的头像看起来像这样漂亮。如果图像具有Width <= Height，那么我会将其显示为初始CSS，否则将其显示为"横向"。问题是前四张图片看起来很棒，但我不明白为什么最后两张没有选择风景类(最后两张图片的大小是一样的:3104x1746像素)。会不会是JavaScript出了什么问题?

i < $(".avatar").length - 1是错误的，因为您省略了数组中的最后一项。数组索引是从0到length - 1，因为你在做i < length - 1，你的循环从0执行到2(长度是4，所以i < 4-1)省略索引3处的最后一个元素。

你可以用

$(".avatar").each(function () {
    if (this.naturalWidth > this.naturalHeight) {
        $(this).addClass("landscape");
    }
})

让你的代码工作

for (var i = 0; i < $(".avatar").length; i++) {
    //your code
}
相关文章：