从父级获取ID

问题描述

|

<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>

当我单击\'vote up \'或\'flag \'

href

链接时，我希望能够从包含

div

的主元素中获取

messageId

。我该怎么办？     

解决方法

        

$( \'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/     ,        使用

closest

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

另外，您应在自定义属性上使用“ 5”前缀，以确保符合网络标准。     ,        您可以使用

.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()

函数简单地获取这些数据：

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

具有

data-

属性的jsFiddle演示     ,        这未经测试，但是类似的方法可能有效：

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

    alert(value);
});

    ,        您可以通过在包含消息ID的

<a>

元素上动态输出ID来解决该问题吗？ 就像是

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

    ,        

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