Jquery 基于图像维度添加属性

我为一个使用第三方平台的客户工作，该平台只允许我覆盖CSS并部分编辑HTML模板。我还可以通过添加Javascript来进行更改，在本例中，我需要根据缩略图的尺寸（表示为列表项中的图像）附加类和ID。我开始用提琴，用div替换图像

以下是HTML：

<ul>
  <li><div class="item item1"></div></li>
  <li><div class="item item2"></div></li>
</ul>

这里是JQuery代码，它在语法上似乎是正确的，但没有产生任何结果。不知道问题出在哪里

var itemWidth = $('.item').width();
var itemHeight = $('.item').height();

if (itemWidth > itemheight) {
  $('.item', this).addAttr('id','fill-landscape');
} else {
  $('.item', this).addAttr('id','fill-portrait');
}

---

同样，小提琴的链接是。

您需要选择要获取其尺寸的单个元素。否则，$'li'选择器将选择页面上的每个li元素。例如：

$('.item1').height();

然后，您可以添加一个id，如下所示：

$('.item1').attr('id', 'blah');

一个明确的例子：

现在进行更多的迭代

---

有几件事情看起来不太对劲：

当前代码中的输入错误itemheight应为itemheight addAttrid，值应为attrid，值 在选择器$li中，这是指不能在选择器中使用的窗口$li，this.length=0 您只访问遇到的第一个li，而不是ul中的所有li元素 -综合上述所有因素

我在上述演示和以下脚本中使用了您现有的HTML和CSS：

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.attr('id', 'fill-landscape');
  } else {
    $item.attr('id', 'fill-portrait');
  }
});

关于id与类的旁注 如果你正计划拥有其中的几个 元素使用的id值可能与您希望切换到的id值相同 改为类，即：.addClassfill横向而不是attrid，填充横向。id值必须是唯一的。这将是无效的 HTML和jQuery选择器也只匹配第一个匹配的id和 不会返回集合。当然，这意味着你必须更新你的CSS，以及从填充景观到.fill景观

-使用类而不是ID以防万一

上面的演示使用了以下已更改的CSS fill-x。fill-x：

.fill-portrait {
  background:#333;
}
.fill-landscape {
  background:#888;
}

使用.addClass而不是.attr更改了脚本：

---

hm我添加了一个通用类项并试图添加它，但是它似乎没有产生积极的结果：感谢代码示例应该显示如何迭代匹配的元素。您的只为特定类的元素附加了一个ID。同样，这不会像您声称的那样在元素上迭代。这只在两个不同的类上执行相同的代码，这些类可能仍然不是一个元素。修复后，请参见Joeltine的答案。此外，重复ID是一个非常糟糕的主意。既然已经有了类，为什么还要附加ID？是否计划对多个元素应用填充横向和填充纵向？@Alexander:+1非常好的一点，在发布我的答案后，我也注意到了这种可能性，并在最后添加了一条注释，以确保OP了解重复id值将导致的问题，如果是这样的话，使用类以及演示会更好。

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.attr('id', 'fill-landscape');
  } else {
    $item.attr('id', 'fill-portrait');
  }
});

.fill-portrait {
  background:#333;
}
.fill-landscape {
  background:#888;
}

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.addClass('fill-landscape');
  } else {
    $item.addClass('fill-portrait');
  }
});