Блог

Главная - Вопросы по программированию - Получение верхнего и левого смещения div в jQuery

Получение верхнего и левого смещения div в jQuery

#jquery #position #offset

#jquery #позиция #смещение

Вопрос:

Чтобы получить верхнюю и левую часть текущего div, нажмите на это.

 <div class="channel" onclick="highlight_channel();">
    <p>Pax TV, 8am (Lima, Peru, in Spanish)</p>
</div>

function highlight_channel() {
    var highlight_top = $(this).position().top;
    var highlight_left = $(this).position().left;
    alert(highlight_top);
    var clear_highlight = document.getElementById("highlight");
    clear_highlight.parentElement.removeChild(clear_highlight); 
    $("#page").append('<div id="highlight" class="channel selected" style="top:' highlight_top 'left=' highlight_left '></div>');
}

Похоже, это не дает информации.

Ответ №1:

Почему бы не использовать метод jQuery click, если вы уже используете jQuery:

 $('.channel').click(function() {
    var highlight_top = $(this).position().top;
    var highlight_left = $(this).position().left;
    alert(highlight_top);
    var clear_highlight = document.getElementById("highlight");
    clear_highlight.parentElement.removeChild(clear_highlight); 
    $("#page").append('<div id="highlight" class="channel selected" style="top:' highlight_top 'left=' highlight_left '></div>');

});

http://jsfiddle.net/ZbnZ9/

Комментарии:

1. Функция щелчка jquery была правильным способом. Однако для того, что мне было нужно, мне пришлось упростить функцию, чтобы быть только $('.channel').removeClass("selected"); $(this).addClass("selected"); . Это позволяет выделить выбранный div. Я помещаю теги скрипта сразу после выделяемых разделов, и это работает. Вот скрипка jsfiddle.net/qeXZV .

Ответ №2:

Попробуйте offset() вместо position() .

Комментарии:

1. Является ли offset() правильной функцией всякий раз, когда результат должен использоваться для установки верхнего, левого элемента?

Ответ №3:

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

 function highlight_channel() {
    offs = $(this).offset(); // <-- caching for better performance.
    var highlight_top = offs.top;
    var highlight_left = offs.left;
    alert(highlight_top);
    $("#highlight").replaceWith('<div id="highlight" class="channel selected" style="top:' highlight_top 'left=' highlight_left '></div>'); // <-- replacing #highlight the jQuery way
}

Комментарии:

1. Спасибо. Я пошел с ответом о функции jquery .click.

Ответ №4:

Я думаю, вы пропустили «; «.

 $("#page").append('<div id="highlight" class="channel selected" style="top:' highlight_top '; left=' highlight_left '; ></div>');

Удачи.

Комментарии:

1. ОК. Это было необходимо в спецификациях стиля. Но проблема заключалась в том, что я не вызывал функцию в нужном месте.