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

how to Get an id of DOM elements using JQuery

本文关键字：元素 id DOM 获取 何使用 JQuery      更新时间：2023-09-26

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

我的目的是突出显示（背景色）点击的链接（a）。如果"lia"在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"));

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

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

$(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');
相关文章：