отслеживание родителя

Question

собратья, ниже приведен фрагмент структуры, над которой я работаю. У меня есть список элементов (the-list), который содержит набор элементов, каждый из которых идентифицируется оболочкой с идентификатором со значением, уникальным для этого элемента (id = "123"). Каждый элемент имеет несколько дочерних элементов, в том числе один, содержащий несколько кнопок действий.

<div id="the-list">

    <div id="123" class="an-item">
        <div></div>
        <div></div>
        <div id="footer">
            <div id="something"></div>
            <div id="actions">
                <botton id="action-email">email</button>
                <botton id="action-edit">edit</button>
            </div>
        </div>
    </div>

    <div id="124" class="an-item">
        <div></div>
        <div></div>
        <div id="footer">
            <div id="something"></div>
            <div id="actions">
                <botton id="action-email">email</button>
                <botton id="action-edit">edit</button>
            </div>
        </div>

    </div>  

</div>  

Я обрабатываю всплывающие щелчки мышью на уровне списка (the-list), и это, похоже, работает. Моя проблема в том, чтобы определить, какая кнопка была нажата. поэтому, когда нажимается одна из кнопок действия электронной почты, мне нужно знать, принадлежала ли она элементу 123 или элементу 124.

Есть ли способ получить номер родительского идентификатора через jQuery или лучший шаблон проектирования?

спасибо

Answer 1

Вы не можете использовать один и тот же идентификатор дважды!

Дайте вашей кнопке отдельные идентификаторы - в этом случае вы можете просто использовать идентификаторы для идентификации кнопок или классов.В этом случае вы можете получить его родитель с помощью этого кода;при условии, что this является кнопкой: $(this).closest('.an-item').attr('id')

Демо: http://jsfiddle.net/ThiefMaster/SvBR2/

Answer 2

Во-первых, вы неправильно написали "кнопка" в своем примере кода. Вы должны это исправить. :)

Во-вторых, как сказал ThiefMaster, вы должны присвоить кнопкам уникальные идентификаторы. Два элемента могут иметь одинаковый атрибут name, но не один и тот же атрибут id. Это касается всех ваших элементов. Возможно, вы захотите дать им классы, если нет необходимости иметь их уникальные идентификаторы.

Тогда, как только вы это сделали. Используя событие нажатия на уровне списка, вы можете получить идентификатор нажатой кнопки, например:

$(function() {
    $('#the-list').click(function(evt) {
        var elemid = $(evt.target).attr('id');
        if (/action-/.test(elemid)) {
            alert('this is an action! Element ID: ' + elemid);
        }
    });
});

Это также проверяет, чтобы убедиться, что кнопка была нажата, выполнив проверку регулярного выражения для идентификатора, чтобы убедиться, что в ней есть «действие». Это просто гарантирует, что вы не нажимаете на какой-либо другой элемент вместо кнопки.

Вы можете увидеть это в действии здесь .