Question

如何获得组件的父Div ID。

我已经提到了这个链接，但它没有用。

jQuery get id of element by searching for it by class

这是我的示例代码。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            function linkClickEvent()
            {
                alert ($(this).parent().attr('id')); //Gives Me Undefined
                alert($(this).closest('div').attr('id')); //Gives Me Undefined
                alert($(this).parent().attr('id')); //Gives Me Undefined
            }
        </script>
    </head>
    <body>
        <div id="container_1">
            <a href="#" onclick="linkClickEvent();" id="link_1">Container_1</a>
        </div>
        <div id="container_2">
            <a href="#" onclick="linkClickEvent();" id="link_2">Container_2</a>
        </div>
        <div id="container_3">
            <a href="#" onclick="linkClickEvent();" id="link_3">Container_3</a>
        </div>
    </body>
</html>

Answer 1

更改您的onclick事件，在onclick事件函数linkClickEvent中使用this传递当前元素引用：

 <a href="#" onclick="linkClickEvent(this);" id="link_1">Container_1</a>

并在函数中添加参数以接受元素引用：

function linkClickEvent (element) {
    console.log($(element).closest("div").attr("id"));
}

Answer 2

问题是因为您使用on*属性来连接事件，this引用window，而不是点击的元素。使用jQuery来连接你的事件：

<div id="container_1">
    <a href="#" id="link_1">Container_1</a>
</div>
<div id="container_2">
    <a href="#" id="link_2">Container_2</a>
</div>
<div id="container_3">
    <a href="#" id="link_3">Container_3</a>
</div>

$('div a').click(function(e) {
    e.preventDefault();
    var parentId = $(this).closest('div').prop('id');
    alert(parentId);
});

Example fiddle

Answer 3

您应该在JS文件中进行事件处理。分离内容，风格和行为确实是最佳实践。

您可以通过以下方式获取您的元素：

$(document).on('click', '.element', function(){/*...*/});

然后保存通过以下方式点击的属性的ID：

var parent_id = $(this).parents('.classOfParent').attr('id');

或

var parent_id = $(this).parent().attr('id');

此外，如果有疑问，请检查console.log（）的“this”是什么，它比alert（）更好地工作。

编辑：修改了您的问题。对不起，现在是对的。

PS：Why is console.log() considered better than alert()?

Answer 4

使用event.preventDefault();

$("a").click(function(event) {
 event.preventDefault();
  $(this).parent().attr('id');
});

Answer 5

使用document.ready而不是onclick属性。

 $(document).ready(function() {
            $('a').click(function() {
                var id = $(this).parent().attr('id');
                alert(id);
            });
        });

在jquery / javascript中获取父div标识

5 个答案: