JavaScript 只遍历前四个元素

Question

//@*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;
}  

这是结果:image
所以问题是我想显示不同尺寸的头像，看起来有点像那样。如果图像的宽度 <= 高度，那么我会将其显示为我的初始 CSS，否则将其显示为“风景”。问题是前四张图片看起来不错，但我不明白为什么后两张没有选择风景类别(最后两张图片的大小相同:3104x1746 像素)。 JavaScript 有问题吗？

Answer 1

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
}