jquery - 以 jQuery 为中心的 div

Question

我有这段 jQuery 代码将 div 居中到它的父级。

$(document).ready(function(){
    function move_div(){
        parent_width = $('.holder').parent().width();
        parent_height = $('.holder').parent().height();

        obj_width = $('.holder').width();
        obj_height = $('.holder').height();

        $('.holder').css('top', (parent_height / 2) - (obj_height / 2)).css('left', (parent_width / 2) - (obj_width / 2));
    }
        move_div();

    $(window).resize(function(){
        move_div();
    });
});

我想在多个 div 上使用它，但不能，因为代码只使用类 'holder' 获取第一个 div 的高度 + 宽度......谁能帮助解决这个问题......？

Answer 1

使用.each() 逐个循环遍历所有元素。

$(this)引用当前具有类的元素holder

$(document).ready(function () {
    function move_div() {
        $('.holder').each(function () {
            parent_width = $(this).parent().width();
            parent_height = $(this).parent().height();

            obj_width = $(this).width();
            obj_height = $(this).height();
            $(this).css('top', (parent_height / 2) - (obj_height / 2)).css('left', (parent_width / 2) - (obj_width / 2));
        });
    }
    move_div();
    $(window).resize(function () {
        move_div();
    });
});