Question

在我正在工作的Wordpress网站上，我需要为所有肖像图像添加一个“高”类，以便它们具有填充。所有其他图像将获得“宽幅”类别。图像具有标题，这些标题也需要包含在填充中，因此实际上是<figure>父元素，我需要向其中添加“ tall”类，而不是<img>标签。因此，我试图为所有<figure>元素添加一个类，这些元素的子元素<img>的高度大于其宽度。

我的问题是，尽管<img>指定了高度和宽度，而<figure>仅指定了高度，所以下面的代码导致在“我”的情况下将“宽”类添加到所有图像中我猜想它应该从<figure>元素中获取高度和宽度，而仅仅是从<img>元素中获取宽度来与之比较。

jQuery(window).on('load', function() {
    jQuery('img').parent().addClass(function() {
        if (this.height > this.width) {
            return 'tall';
        } else {
            return 'wide';
        }
    });
});
</script>

我如何纠正我的代码，以向所有<figure>元素（包含高度大于其宽度的<img>元素）添加一个'tall'类？

Answer 1

您只需要在函数内再次.find()，因为this会指向父对象。另外，如果页面上有多个图像，您可能需要将其包装在.each()循环中，以在img的每个实例及其各自的父对象上调用它。

jQuery('img').each(function(index, element) {
    jQuery(element).parent().addClass(function() {
            let img = jQuery(this).find('img');
            if (img.height() > img.width()) {
                return 'tall';
            } else {
                return 'wide';
            }
        });
});

注意：这会将1：1比例的图像标记为“宽”

编辑：

如果您使用的是each，则效率更高，更简单：

jQuery('img').each(function(index, element) {
    let img = jQuery(element);
    let width = img.width();
    let height = img.height();
    let cls = width > height ? 'wide':'tall';

    img.parent().addClass(cls);
});

Answer 2

您可以尝试以下代码。您必须在下找到img的高度和宽度。

jQuery（'figure img'）。each（function（）{

    if(jQuery(this).height() > jQuery(this).width())
    {
        jQuery(this).parent().addClass('tall');
        }
    else{
        jQuery(this).parent().addClass('wide');

        }
    });

如何将一个类添加到其高度大于宽度的元素的父元素中

2 个答案:

编辑：