Как найти идентификатор ближайшего верхнего элемента с конкретным именем класса?

Question

HTML-код:

<div id="1" class="master"></div>
<div id="2" class="slave"></div>
<div id="3" class="slave"></div>

<div id="4" class="master"></div>
<div id="5" class="slave"></div>
<div id="6" class="slave"></div>

скажем, мы используем $ ('div'). Click (), чтобы сделать эти элементы DIV кликабельными:

$('div').click(function() {
    var el = $(this);
    var master_id = ???;
    alert(master_id);
});

Затем, нажимая на элементы DIV с классом «slave», мы должны предупредить ID ближайшего верхнего элемента DIV с классом «master», поэтому, если мы нажимаем на DIV # 5 или DIV # 6, alerts = "4 «(DIV # 4), если DIV # 2 или DIV # 3 - alerts =« 1 »(DIV # 1). Но как это сделать? ;)

Answer 1

Обновлено:

$('div').click(function() {
    var el = $(this);
    var master_id = el.prevAll('.master').attr('id');
    alert(master_id);
});

Edit:
Вы также можете использовать фильтры, чтобы при щелчке по div с помощью calss 'master' событие не вызывалось:

$('div').click(function(e) {
    var el =$(this);
    if (!el.is('.master')){
        var master_id = el.prevAll(".master").attr('id');
    alert(master_id);
    }

Answer 2

Сначала я подумал, что prev подойдет, но после некоторого тестирования я заметил, что он не будет работать на slave, не помещенном непосредственно после другого slave. Схватка первого матча из prevAll сработала отлично.

Демо: http://jsbin.com/ulipi

$('.slave').click(function() {
    var el = $(this);
    var master_id = $(el.prevAll('.master').get(0)).attr('id');
    alert(master_id);
});