Question

我的翻盖卡上有一个单词，背面有一个单词的翻译。我已经构建了一个.each（）函数来查找翻盖卡的哪一面具有最高的内容，并使该侧面具有相对位置，以便卡片容器始终与最高内容一样大。

我的页面加载后，我已经成功实现了.each（）函数。它如下：

$('.word-card').each(function(){


    var frontHeight = $(this).find(".front").outerHeight();
    var backHeight = $(this).find(".back").outerHeight();

    if(frontHeight > backHeight){
        $(this).find('.front').css( { position: 'relative', 'min-height': '150px'  });
        $(this).find('.back').css( { position: 'absolute', top: '0', left: '0' });
    } else {
        $(this).find('.back').css( { position: 'relative', 'min-height': '150px'  });
        $(this).find('.front').css( { position: 'absolute', top: '0', left: '0' });
    }
});

我的网站然而，通过AJAX调用追加新的div。所以我试着将函数转移到我的AJAX调用的成功部分，如下所示：

success: function(response){

        var $response = $(response);


        $($response).find('.word-card').each(function(){
            var frontHeight = $(this).find(".front").outerHeight();
            var backHeight = $(this).find(".back").outerHeight();
            if(frontHeight > backHeight){
                $(this).find('.front').css( { position: 'relative', 'min-height': '150px'  });
                $(this).find('.back').css( { position: 'absolute', top: '0', left: '0' });
            } else {
                $(this).find('.back').css( { position: 'relative', 'min-height': '150px'  });
                $(this).find('.front').css( { position: 'absolute', top: '0', left: '0' });
            }
        })


        $container.isotope().append($response).isotope('appended', $response);

    },

但这并不像预期的那样有效。应用样式就好像frontHeight和backHeight变量返回'false'。

我已经尝试了许多不同的尝试来解决这个问题。如此多，重述我所做的事情将浪费每个人的时间。

基本上，通过浏览器调试器，我相信成功函数中的'this'并不是针对正确的元素。

但是，我不能解决这个问题。任何帮助将不胜感激。谢谢。

AJAX Success中的.each（）jquery函数

0 个答案: