Javascript 每个都不是封装块 我正在构建一个站点，它动态地将内容放在一组章节的中间。

带图像背景的Div（全宽图像-FWI）

带图像背景的Div（不同高度）

我的问题是，即使每个选择器都使用第一个div来指示它下面的任何其他div的高度，我显然缺少一些非常基本的东西

Jquery

jQuery(window).on("resize", function() {
  jQuery('.fwi').each(function() {
    jQuery('.image-outer').height(jQuery('.fwi-image').height());
  });
}).resize();


jQuery(".fwi-image img").load(function() {
  jQuery('.fwi').each(function() {
    jQuery('.image-outer').height(jQuery('.fwi-image').height());
  });
});

HTML

我的内容在我的div中垂直动态定位在中心
将从上一个图像（而不是其父图像）获取高度-应为1200

将其放入您的文档中

function adjustImageOuterHeight () {
    var fwiImage = jQuery(this).parent(".fwi-image");
    var imageOuter = fwiImage.next(".image-outer");
    imageOuter.height(fwiImage.height());
}

jQuery(document).ready(function () {
    jQuery(".fwi-image img")
        .load(adjustImageOuterHeight)
        .each(function () {
            if (this.complete) adjustImageOuterHeight.call(this);
        });
});

jQuery(window).resize(function () {
    jQuery(".fwi-image img").each(adjustImageOuterHeight);
});

---

松开与

.fwi image

相关的任何其他jQuery内容。还可以选择在

窗口

对象上取消对

.resize（）

的显式调用。

这里是站点：您可以看到第二个图片块，文本位置太低，因为它采用了第一个图片块的大小，这并不能解决我的问题，但是因为这些部分在我的DOM中可能位于不同的位置-由于不同的页面布局，是否仍然可以使用（'this'）选择器？哦，我明白了，

load

图像的事件处理程序注册得太晚了，在它们加载后。很好，很抱歉有人设法将恶意软件转移到我的生产服务器上，我一直在彻底清理它。你是个明星！

function adjustImageOuterHeight () {
    var fwiImage = jQuery(this).parent(".fwi-image");
    var imageOuter = fwiImage.next(".image-outer");
    imageOuter.height(fwiImage.height());
}

jQuery(document).ready(function () {
    jQuery(".fwi-image img")
        .load(adjustImageOuterHeight)
        .each(function () {
            if (this.complete) adjustImageOuterHeight.call(this);
        });
});

jQuery(window).resize(function () {
    jQuery(".fwi-image img").each(adjustImageOuterHeight);
});