Jquery wordpress post image通过比较图像宽度来添加类

Question

问题：

在我的WordPress网站上，我已经应用了一些负边距CSS来定位帖子中的img元素。我的CSS适用于655px +宽度的所有图像（.entry-content容器的全宽）。

然而，不幸的是，宽度小于655像素的图像被拉向.entry-content容器的左侧，因此它们无法居中对齐。

要覆盖它，我需要一个jQuery脚本，它将自定义类插入所有＆＃39; .entry-content p img＆＃39;低于655px宽的元素。

附上截图以帮助解释：请找附件

这是您可以看到此问题的帖子：https://vegbyte.com/best-apples-for-juicing

所以jQuery逻辑基本上是：＆＃34;如果图像宽度小于655px，请插入此类：entry-img-small＆＃34;

尝试

我知道如何在wordpress中使用jquery。我对jquery一片空白，用下面的代码思考，但不知道该怎么做。

 $(window).load(function () {
   var image = $('.each img');
   if (image.width() < 500) {
      $('.oldclass').addClass('newclass');
  }
 });

Answer 1

不确定这是不是一个好主意，但在这里你也可以更好地限制内容区域。 .content img

jQuery(window).on('load', function() {
    jQuery('img').each(function() {
        if(jQuery(this).width() < 655) {
            jQuery(this).addClass('entry-img-small');
        }
    });
});

在jQuery中，如果在加载图像之前在文档就绪上使用它并检查width属性，我认为会更好。

jQuery(document).ready(function($) {
    $('img').each(function() {
        if($(this).attr('width') < 655) {
            $(this).addClass('entry-img-small');
        }
    });
});