jQuery matchHeight.js AJAX加载后设置空style属性问题求助

看起来你遇到的问题是因为直接调用内部方法_apply没有正确识别[data-mh]的分组信息，导致插件无法计算出正确的高度，所以只给元素加了空的style属性。我们可以通过使用matchHeight公开的API来解决这个问题，而不是依赖内部方法。

问题根源 #

matchHeight的[data-mh]属性是在初始化时自动按属性值分组的，AJAX加载的新元素不会自动加入已有的分组。你直接调用_apply时，插件没有把新元素和同组的旧元素关联起来，自然无法计算出统一的高度。

解决方案1：全局重新初始化（简单直接） #

在新元素添加到DOM后，先销毁所有已有的matchHeight实例，再重新初始化所有[data-mh]元素。这样插件会重新扫描所有元素并按data-mh值分组计算高度：

修改你的moreProductsCallback函数如下：

function moreProductsCallback() {
    ajaxDump.removeClass('preloader').find('.page.hide').fadeIn(500, function() {
        $('.page').removeClass('hide');
        button.html('Load More Products');
        
        // 销毁所有已有的matchHeight匹配
        $('[data-mh]').matchHeight('destroy');
        // 重新初始化所有[data-mh]元素，包含新加载的内容
        $('[data-mh]').matchHeight();
    });
}

解决方案2：仅更新受影响的分组（更高效） #

如果你想避免全局重新初始化，可以只针对新元素所属的分组进行更新，这样性能更好：

function moreProductsCallback() {
    ajaxDump.removeClass('preloader').find('.page.hide').fadeIn(500, function() {
        $('.page').removeClass('hide');
        button.html('Load More Products');
        
        // 获取新加载元素的所有[data-mh]分组名称
        var newGroups = $('.ajax-dump').find('[data-mh]').map(function() {
            return $(this).data('mh');
        }).get();
        
        // 去重分组，避免重复处理
        var uniqueGroups = [...new Set(newGroups)];
        
        // 对每个分组执行高度更新
        uniqueGroups.forEach(function(groupName) {
            $('[data-mh="' + groupName + '"]').matchHeight('update');
        });
    });
}

关键注意点 #

• 不要依赖matchHeight的内部方法（比如_apply、_maintainScroll），这些方法没有公开文档，行为可能随时变化，官方推荐使用公开的API：matchHeight()（初始化）、matchHeight('update')（更新）、matchHeight('destroy')（销毁）。
• 确保在元素完全渲染到DOM后再执行高度匹配操作，你放在fadeIn的回调里是正确的做法，避免元素还没加载完成就计算高度。

内容的提问来源于stack exchange，提问作者lukeseager