Получить идентификатор от родителя

Question

<div rownumber="0" messageid="112" class="post" style="position: relative; top: 0px;">
    <div class="post_body">hey hey hey</div>
    <div class="post_info" style="top: 0px;">
        <ul>
            <li class="vote"><a href="#">vote up</a></li>
            <li class="flag"><a href="#">flag</a></li>
        </ul>
    </div>
</div>

Когда я нажимаю на ссылку «голосовать за» или «пометить» href, я хочу получить messageId от основного элемента, содержащего div. Как бы я это сделал?

Answer 1

$( 'li.vote a, li.flag a' ).click( function( e )
{
    var msgId = $( this ).closest( 'div.post' ).attr( 'messageid' );

    e.preventDefault();
} );

Демо: http://jsfiddle.net/JAAulde/jQuGP/4/

Лучше было бы использовать атрибут data- и метод jQuery .data(), поскольку он более точно соответствовал бы стандартам HTML: http://jsfiddle.net/JAAulde/jQuGP/5/

Answer 2

Вы можете использовать .closest(), чтобы идти вверх по дереву, пока не будет найдено совпадение.Здесь он лучше подходит, чем .parents(), который отфильтровывает все родительские элементы ссылки (которые могут содержать много элементов в большей разметке), тогда как .closest() останавливается, когда найдено совпадение.

$('li.vote a, li.flag a').click(function () {
    var id=$(this).closest('div.post').attr('messageid');
});

---

Еще одна важная вещь:

Для хранения произвольных данных на элементах HTML следует использовать атрибуты data- (которые были введены в HTML5стандарт).

Итак, в вашем примере HTML будет выглядеть следующим образом:

<div data-rownumber="0" data-messageid="112" class="post"...

Другое преимущество (помимо действительного документа HTML) заключается в том, что вы можете просто получить эти данные с помощью jQuery .data()function :

var id=$(this).closest('div.post').data('messageid');

jsFiddle Demo с data- атрибутами

Answer 3

Использование closest

$('.post a').click( function() {
    var msgId = $(this).closest('.post').attr('messageid');
});

Кроме того, вы должны использовать префикс data- для пользовательских атрибутов, чтобы обеспечить соответствие веб-стандартам.

Answer 4

Это не проверено, но что-то вроде этого может работать:

$(".vote a").click(function() {
    var value = $(this).parents(".post").attr("messageid");

    alert(value);
});

Answer 5

$( 'li.vote, li.flag' ).click(function() {
    var msgId = $(this).closest('[messageId]').attr('messageId');
)}

Answer 6

Можете ли вы обойти проблему, динамически выводя идентификатор элемента <a>, который содержит идентификатор сообщения?

что-то вроде

<a href="#" id="message-123">