Question

这是情况，我有2个div彼此相邻。一个div的高度非常动态，这基本上意味着它可以增长和缩小以适应它的内容。例如，此div具有可以折叠打开或关闭的内容，或者可以展开以适合加载ajax内容的容器。

现在，旁边的另一个div整齐地跟随第一个通过css的高度。效果很好。但问题是：我想根据它的高度改变第二个div的内容。

换句话说，div 1的大小发生变化，div 2跟随css，我现在需要触发一个ajax调用，用新内容重新填充div 2，这符合它的新大小。

有人知道如何用jquery做到这一点吗？如果可能，不使用超时？

干杯。

Answer 1

正如the thread poelinca provided所示，有一些很好的插件可用于此功能。

如果您不喜欢插件的想法，另一个简单的解决方案是在修改内容时简单地在div上触发“resize”事件。然后你可以使用一个优雅的observer pattern

，按照预期调整resize（）

function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   // all your magic resize mojo goes here
});

Answer 2

https://github.com/sdecima/javascript-detect-element-resize

像魅力一样！

我测试了attrchange，但这不起作用，失去了2小时的工作:(

Answer 3

我唯一能想到的是每隔X秒就有一个计时器检查高度。

这样的事情：

function checkHeightTimer(){
    var div1 = $('#div1');
    var div2 = $('#div2');
    var somesize = #somenumber here;
    if(div1.height() > somesize){
        //do something to div2
    }
    setTimeout(checkHeightTimer, 500); //at 500 miliseconds
}

jquery调整div上的侦听器

3 个答案: