Jquery несколько элементов

Question

Я генерирую несколько элементов span с одинаковым идентификатором

<span id='myLink'>some text</span>

и используя jquery, я хочу открыть наложение div рядом с ним, используя смещение элемента span но когда я вызываю функцию, она работает только для первого элемента span

$('#myLink').click(function() {
            var divOverlay= jQuery('<div id="divOverlay">text on overlay </div>');
            var off=$(this).offset();
            divOverlay.css(
            {
                left:(off.left)+'px',
                top:(off.top-200)+'px'
            });
            divOverlay.appendTo(document.body)

        });

спасибо

Answer 1

все один и тот же идентификатор

вызывает проблемы, идентификаторы должны быть уникальными.

Вместо этого используйте класс

<span id='myLink1' class='myLinkClass'>some text</span>
<span id='myLink2' class='myLinkClass'>some text</span>
<span id='myLink3' class='myLinkClass'>some text</span>

Answer 2

Нельзя использовать один и тот же id для нескольких элементов в одном и том же документе, он должен быть уникальным, использовать class вместо

<span class='myLink'>some text</span>

и

$('.myLink').click(function() {
        var divOverlay= jQuery('<div id="divOverlay">text on overlay </div>');
        var off=$(this).offset();
        divOverlay.css(
        {
            left:(off.left)+'px',
            top:(off.top-200)+'px'
        });
        divOverlay.appendTo(document.body)

    });

Answer 3

ID в DOM предназначены для ссылки только на один элемент. Дайте всем этим пролетам класс:

<span class="myClass">some text</span>

, а затем нацельтесь на них по классу:

$('span.myClass').click(function() {
            var divOverlay= jQuery('<div class="divOverlay">text on overlay </div>');
            var off=$(this).offset();
            divOverlay.css(
            {
                left:(off.left)+'px',
                top:(off.top-200)+'px'
            });
            divOverlay.appendTo(document.body)

        });