JQuery не принимает правильную высоту div

Question

JQuery не принимает правильную высоту div

0

У меня проблема с моим jQuery: я использую скрипт, который позволяет мне центрировать элементы, предоставляя им класс, но этот скрипт не принимает правильную высоту.

Это мой HTML-код:

    <div class="logoutscreen blackbackground">
        <div class="window centered" style="display: block;">
       [CONTENT HERE]
       </div>
    </div>

И этот мой код jQuery:

$(function () {
    $(".centered").css({
        'position': 'absolute',
        'left': '50%',
        'top': '50%',
        'margin-left': -$(this).outerWidth() / 2,
        'margin-top': -$(this).outerHeight() / 2
    });
});

Проблема в том, что сценарий не принимает высоту и ширину div с.centered классом (.window), а его родителем (.logoutscreen).

Почему это происходит? :(

Mattia Del Franco 17 март 2014, в 23:12

Источник

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

PlantTheIdea · Answer 1 · 2014-03-17T19-54-00.000Z

Использование $(this) является вашей проблемой здесь. В отличие от других методов, вы не можете получить доступ к this родительскому объекту как $('.centered') в методе jQuery .css()... по умолчанию он будет глобальным объектом window.

То, что вы хотите сделать, это кешировать свой объект и ссылаться на него явно:

var $centered = $('.centered');

$centered.css({
    position:'absolute',
    left:'50%',
    top:'50%',
    marginLeft:((-1 * $centered.outerWidth()) / 2),
    marginTop:((-1 * $centered.outerHeight()) / 2)
});

Это должно дать вам то, что вы ищете. Однако, если у вас есть несколько экземпляров, вам нужно сделать что-то вроде этого:

$centered.each(function(){
    var $self = $(this);

    $self.css({
        position:'absolute',
        left:'50%',
        top:'50%',
        marginLeft:((-1 * $self.outerWidth()) / 2),
        marginTop:((-1 * $self.outerHeight()) / 2)
    });
});

Таким образом, соблюдаются каждая уникальная height и width.

Minko Gechev · Answer 2 · 2014-03-17T18-54-00.000Z

this не $('.centered').

Использование:

$(function () {
    var centered = $('.centered').first();
    centered.css({
        'position': 'absolute',
        'left': '50%',
        'top': '50%',
        'margin-left': -centered.outerWidth() / 2,
        'margin-top': -centered.outerHeight() / 2
    });
});

Извините, моя ошибка, я думаю, что видел что-то не так, но уже хорошо ..