如何使用 JQuery 获取 DOM 元素的 id

Question

我在理解 JQuery 元素的结构以及如何在 DOM 树中移动时遇到了一些问题。

我的目标是突出显示（背景颜色）点击的链接（a）。 如果“li a”在 ul 内部，它不是主“菜单”ul（表示子菜单链接），那么我想突出显示子菜单链接和顶部菜单链接。

我的 HTML 代码是：

<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
    <li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
    <li><a href="welcome.html"  id="d" title="c">read</a>
        <ul class="par">
            <li><a href="welcome.html" id="b" title="title" >test</a></li>
            <li><a href="Register_client.aspx" id="c" title="add">addRead</a></li>
         </ul>
     </li>
     <li><a href="books.aspx" title="Books" >Books</a>
           <ul  class="par">
                <li><a href="books.aspx" title="Manage">Search</a></li>
                <li><a href="Register_book.aspx" title="addbook">Register</a></li>
            </ul>
      </li>
      <li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>

</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>

</body>

至于 JQuery 我试过这个：

$(this).closest("ul").find("a").attr("id"));

还有一些其他版本的父母，但是当我检查警报时，我得到“未定义”或空字符串。 你能帮我理解我的错误在哪里吗？ 我确定这是非常简单的事情，我只是找不到它。 谢谢

Answer 1

要突出显示子菜单链接及其最顶层的父链接，请使用以下代码：

$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");

第一行突出显示链接。

第二行将查找最顶部的'li'，然后选择其直接的'a' 标记并突出显示它

更新：

要删除上一次点击的突出显示，请使用 CSS 类：

.highlight {
    background-color: red;
}

然后使用以下代码：

$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');