Отображение координат смещения развернутого / свернутого участка

Question

У меня есть expand/collapse раздел на моей веб-странице. Развернуть / свернуть делается с помощью section не div/table, Мой код:

<section id="examples">
    <text id = "ui-examples">
        <p class="the-data">Of course you can add other text before, after, and around the elements described in the previous section.</p>
    </text>
</section>

При загрузке страницы происходит много случаев the-data, Итак ui-examples загружается с разными идентификаторами и соответствующими the-data, Как я могу получить те разные text ids рассчитать offset координаты каждого text?

РЕДАКТИРОВАТЬ форматирование

Answer 1

Я бы сделал что-то вроде этого:

HTML

<section class="examples">
    <text class="ui-examples">
        <p class="the-data">Of course you can add other text before, after, and around the elements described in the previous section.</p>
    </text>
</section>

И JQuery

$(document).ready(function() {
    $('.examples').each(function() {
        var theData = $(this).find('.the-data');
        console.log(theData.offset().left);
        console.log(theData.offset().top);
    });
});

Сначала это ожидает готовности документа, как только он проходит по каждому элементу div, у которого есть класс "example" внутри цикла, который мы используем find Функция jQuery, которая будет искать всех дочерних элементов текущего div (в данном случае это один экземпляр .example), которые соответствуют селектору. Итак, используя .the-data он найдет тег абзаца, который вы ищете.

Вы можете использовать offset() чтобы получить координаты.