div以jQuery为中心

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();
    });
});