单击时获取元素的ID

时间:2012-05-08 11:19:54

标签: jquery html

我的代码中有一些可折叠段,我使用jQuery实现。

像这样:

<h2 class="expand">Link1</h2>
                <div class="collapse">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
                    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                    qui officia deserunt mollit anim id est laborum.</p>                
                    <p class="top"><a href="#content">Top of page</a></p>
                </div>

还有一些相同的部分,如上面的代码。

我想点击它时获取每个标题的ID。比如说,当我点击“Link1”时,我希望它的ID可以弹出。

我已经定义了在弹出窗口中显示id的功能。这是:

 $(document).ready(function () {
        $("a").click(function (event) {
          alert(event.target.id);
        });
  });

每当我运行应用程序并单击(例如)“Link1”时,我得到一个空白输出。声明所有链接的单独类似乎是一个选项,但我想这样做,否则.. 任何人都可以建议如何获得这些元素的Id?

2 个答案:

答案 0 :(得分:6)

您提供的标记表明您尚未向这些元素提供ID。尝试给他们一个ID,如下:

<a id="contentLink" href="#content">Top of page</a>

然后你可以这样做:

 $(document).ready(function () {
    $("a").click(function (event) {
        alert($(this).attr("id"));
    });
 });

编辑:或者如果你说“ID”,你实际上是指href(因为你的标记有href属性),那么你可以这样做:

$(document).ready(function () {
    $("a").click(function (event) {
        alert($(this).attr("href"));
    });
 });

答案 1 :(得分:2)

首先,如果您指的是绑定处理程序的元素,则应使用this。考虑一下:

<a href="#content" id="a"><span id="b">foo</span></a>

如果a元素上绑定了处理程序,this.id将为aevent.target.id将为b。除非您意味着 event.target,否则请使用this

其次,id值不是继承的(实际上,因为它们必须是唯一的,否则就没有意义)。您需要为a元素提供id值,或者您需要遍历文档并找到相关元素以获取其id

您可以使用以下代码执行此操作:

$(this).closest('div').prev().attr('id')

然而您的h2代码实际上没有id,因此您需要提供一个代码。如果您想获取该标签的文字,请使用text

$(this).closest('div').prev().text()