javascript - ajax加载后jQuery可以重置父高度吗？

Question

尝试重置父容器的高度时，回调函数没有太多运气。

事件：

1. 用户点击.boxyComments a
2. .showComments 接受load并带来内容。relativecss 属性改变它的高度
3. .boxy使用其内部元素的添加高度值.articleImageThumb和.initialPostLoad更改的高度值调整大小.showComments

第 3 步不是调整大小。(window).load在整个函数完成之前，用仍然包裹的height值不会改变，导致父级的高度没有改变.boxy。

所以FRUSTRATING……

下面的例子：

$(".boxyComments a").click(function (event) {

        var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
        var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
        var bComments = $(this).closest(".showComments").height();

        event.preventDefault();
        var post_id = $(this).attr("rel");
        $.ajaxSetup({cache:false});
        $(this).closest(".boxyComments").find(".showComments")
        .load("<?php echo get_site_url(); ?>/ajax-fold/",{id: post_id}, function() {
            console.log(excHeight)
            $(document).ready().closest('.boxy').animate({height:  postHeight + excHeight}, 500);
        });
});

半伪输出：

<div class="boxy">

<div class="articleImageThumb">
<a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true);
    else the_permalink(); ?>" rel="<?php the_ID(); ?>">
    <?php echo get_the_post_thumbnail($page->ID, 'original'); ?>
</a>
</div>

<div class="boxyComments">
<a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>" rel="<?php the_ID(); ?>" >Open Comments</a>
<div class="showComments"></div>
</div>

</div>

console.log 输出仅给出完成height()前的值load()。

Is there a way to reset that after the load?

Answer 1

Why not just call:

 excHeight = $(document).ready().closest('.boxy').find('.showComments').height();

After the load/load complete, so you will end up with something like:

.load("<?php echo get_site_url(); ?>/ajax-fold/",{id: post_id}, function() {
        excHeight =  $(document).ready().closest('.boxy').find('.showComments').height();
        console.log(excHeight)
        $(document).ready().closest('.boxy').animate({height:  postHeight + excHeight}, 500);
    });

Answer 2

You're jquery seems to be wrong.

Right off the bat, this code will error out with null

var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();

the .boxy div doesn't have a child with the class .initialPostLoad

Then you try to get the height for .showcomments using .closest().

.closest() 

goes up the DOM structure to find a match, but what you're looking for is a sibling.

Try this instead

var bComments = $(this).siblings(".showComments").height();