Как мне позиционировать свой элемент jQuery относительно другого элемента

Question

Я хочу расположить свой элемент jQuery относительно моего упаковщика страниц.У меня есть вся страница, содержащаяся в div под названием Wrapper.Мой текущий код:

<script type="text/javascript">
$(function() {
$('a.poplightOne').hover(function(e) {
        var html =    '<div id="infoOne">'
        html +=     '</div>';               
        $('body').append(html).children('#infoOne').hide().fadeIn(400);
        $('#infoOne').css({
            position: 'absolute',
        top: '10px',
            left: '10px
    });
}, function() {
    $('#infoOne').remove();
});
});
</script> 

Answer 1

Если Wrapper - это идентификатор вашего контейнера div, разве вы не можете просто добавить к нему свой html вместо body?

<script type="text/javascript">
$(function() {
$('a.poplightOne').hover(function(e) {
        var html =    '<div id="infoOne">'
        html +=     '</div>';               
        $('#Wrapper').append(html).children('#infoOne').hide().fadeIn(400);
        $('#infoOne').css({
            position: 'absolute',
        top: '10px',
            left: '10px
    });
}, function() {
    $('#infoOne').remove();
});
});
</script>

Я не уверен, правильно ли я понимаю.Если вы хотите, чтобы ваш div шел после вашего элемента Wrapper, тогда ваш js выглядит нормально, но вам придется изменить свой css, чтобы тело было относительным, а у вашего Wrapper и нового элемента должен быть относительный css с возможным float.

Answer 2

Существует множество различных методов манипулирования DOM и добавления элементов в DOM в разных порядках. Вот некоторые из них:

Append ()

appendTo ()

после ()

раньше ()

Просто зайдите на api.jquery.com и просмотрите варианты.

Если вы хотите разместить его рядом с / над / над другим элементом на странице, вы можете использовать position () , чтобы узнать, где находится ваш существующий элемент, и настроить новый там, где вы хотите , используя это в качестве основы.

Answer 3

Я считаю, что вы ищете $('#referenceElement').position() или, возможно, $('#referenceElement').offset(), в зависимости от того, как вы хотите найти.

Answer 4

Попробуйте это

$(function() {
    $('a.poplightOne').hover(function(e) {
        var leftvar=e.pageX;
        var topvar=e.pageY;
        var html =    '<div id="infoOne">'
        html +=     '</div>';               
        $('body').append(html).children('#infoOne').hide().fadeIn(400);
        $('#infoOne').css({
            position: 'absolute',
            top: topvar,
            left: leftvar
        });

     });
});