jquery循环使用.each来检测宽度和高度

我在jquery循环一组html代码时遇到了一些问题。我编写了一个wee条件脚本，用于检测图像是纵向还是横向，并为其中任何一个添加一个类。这在隔离状态下非常有效，但现在我需要检测同一页面上的多个实例

<li>
 <figure class="eventimage">
  <img class="" src="images/home1.jpg">
 </figure>
 <div>
  some other code that is not important
 </div>
</li>
<li>
 <figure class="eventimage">
  <img class="" src="images/home2.jpg">
 </figure>
 <div>
   some other code that is not important
 </div>
</li>
<li>
 <figure class="eventimage">
  <img class="" src="images/home3.jpg">
 </figure>
 <div>
   some other code that is not important
 </div>
</li>
<li>
 <figure class="eventimage">
  <img class="" src="images/home4.jpg">
 </figure>
 <div>
   some other code that is not important
 </div>
</li>

其他一些不重要的代码


其他一些不重要的代码


其他一些不重要的代码


其他一些不重要的代码

所以我认为它利用了。每种方法

$(".eventimage img").each(function() {
    if ( .width() > .height()){
        //it's a landscape
        $(this).addClass("landscape");
    } else if ( .width() < .height()){
        //it's a portrait
        $(this).addClass("portrait");
    } else {
        $(this).addClass("canttell");
    }
});

$（.eventimage img”）.each（函数（）{
如果（.width（）>.height（））{
//这是一幅风景画
$（此）.addClass（“景观”）；
}否则，如果（.width（）<.height（））{
//这是一幅肖像画
$（此）.addClass（“肖像”）；
}否则{
$（此）.addClass（“canttell”）；
}
});

我的问题是，每个img标签输出的结果都完全相同，我的测试图像是横向和纵向的良好混合，所以有些地方不对劲

---

有人能帮忙吗？

我想你忘了提到jQuery对象的

.width（）

和

.height（）

$（.eventimage img”）.each（函数（）{
如果（$（this.width（）>$（this.height（））{
//这是一幅风景画
$（此）.addClass（“景观”）；
}else if（$（this.width（）<$（this.height（））{
//这是一幅肖像画
$（此）.addClass（“肖像”）；
}否则{
$（此）.addClass（“canttell”）；
}
});

---

我假设您试图找到图像的

宽度

和

高度

。因此，在他们前面添加了

$（此）

。

根据您的逻辑，将您的代码更改为：

$(".eventimage img").each(function(index, element) {
    if ($(element).width() > $(element).height()){
        //it's a landscape
        $(element).addClass("landscape");
    } else if ( $(element).width() < $(element).height()){
        //it's a portrait
        $(element).addClass("portrait");
    } else {
        $(element).addClass("canttell");
    }
});

$（.eventimage img”）。每个（函数（索引，元素）{
if（$（元素）.width（）>$（元素）.height（））{
//这是一幅风景画
$（元素）.addClass（“景观”）；
}else if（$（元素）.width（）<$（元素）.height（））{
//这是一幅肖像画
$（元素）.addClass（“肖像”）；
}否则{
$（元素）.addClass（“canttell”）；
}
});

---

请参阅jquery.each（）：

的文档，我将使用onload事件来允许首先下载图像，而不是each循环：

$(".eventimage img").onload = function() {
  var width = this.width;
  var height = this.height;
      if ( width > height){
        //it's a landscape
        $(this).addClass("landscape");
    } else if ( width < height){
        //it's a portrait
        $(this).addClass("portrait");
    } else {
        $(this).addClass("canttell");
    }
}

下面是其他人的例子，说明了如何做到这一点：

---

（.width（）<.height（））{

-ehh，

.width（）

前面没有元素？不能使用

.width（）

和

.height（）

没有上下文。什么元素的宽度和高度？我认为JS不会马上知道图像的大小，因为加载图像需要不同的时间。这篇文章描述了如何使用onload事件。（不是公认的答案，而是有356张赞成票的答案）天才，谢谢dave。我只是一个试图扩展知识的老式印刷设计师。JS是我决心学习的下一个层次，所以感谢你花时间回答我的问题，让我的一天过得更好。dave，你给了我一个更好的解决方案，真是太酷了。这应该会让我在下一次创作时更加全面地思考TEA脚本。干杯。谢谢，我还没有完全测试过它，所以它可能需要一些语法调整。希望它能工作。从我在浏览器检查器中看到的情况来看，工作非常完美：）如果遇到任何问题，请告诉我。我不想在所谓的“维基”上留下任何错误信息。谢谢！

$(".eventimage img").onload = function() {
  var width = this.width;
  var height = this.height;
      if ( width > height){
        //it's a landscape
        $(this).addClass("landscape");
    } else if ( width < height){
        //it's a portrait
        $(this).addClass("portrait");
    } else {
        $(this).addClass("canttell");
    }
}

var GetImageSize = function( src, callback ) {
  this.src = src;
  this.callback = callback;
  this.image = new Image();
  this.requestImageSize()
};